前言

使用float可以讓元素浮起來~原本block會撐滿父元素的寬，現在不會發生了，變得有點像inline-block的樣子，元素開始會水平排列。

float比較常用的有

float:left; //向左排列
float:right; //向右排列

在未設定float之前，每一個元素都佔滿了父元素的寬

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
</section>

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  background: pink;
}

.right {
  background: cyan;
}

再設定float之後，元素依據float的方向從父元素的邊界開始排列

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float:left;
  background: pink;
}

.right {
  float:right;
  background: cyan;
}

但可以發現父元素被壓扁了~原因是子元素都浮動起來，沒有內容物撐開父元素。
所以我們需要在最後解除浮動~

section:after{
  content:'';
  display:table;
  clear:both;
}