寫在前面
浮動是CSS中一個相對比較麻煩的屬性，與之伴隨的通常是清除浮動。今天我們一起來搞定浮動。
常見的用法
事實上，當我們將一個元素設定成浮動時，達到的效果如下圖：
這種版式相信大家都見過，很多雜誌都會採用這種左邊或者右邊插圖，文字環繞的效果。
另一種常見的浮動的用法如下圖：
即在某一行內，使某一部分右對齊，通常不會用margin實現，而是使用浮動。
浮動帶來的問題
浮動的元素無法撐開父元素，即導致高度坍塌！！
來看下面的例子：
<div class="container">
<div class="son1"></div>
<div class="son2"></div>
</div>
.container {
background-color: lightblue;
font-size: 0;
}
.son1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: orange;
}
.son2 {
width: 100px;
height: 100px;
float: right;
background-color: lightgray;
}
複製程式碼
當較大的方塊浮動時，我們可以看到他無法撐開父元素。通常情況下這不是我們想要的結果，因為這會導致佈局混亂。當父元素內的子元素全部浮動時尤其明顯，父元素的高度會坍塌為0。
清除浮動
因此，當我們用到了浮動，又不想出現這種情況的時候，就需要清除浮動。
清除浮動的方式可能有很多種，但是現在比較流行，我個人比較喜歡的方式如下：
首先，新增以下CSS：
.clearfix:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
複製程式碼然後，在父容器上新增clearfix類，最後程式碼如下：
<div class="container clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
.container {
background-color: lightblue;
font-size: 0;
}
.son1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: orange;
}
.son2 {
width: 100px;
height: 100px;
float: right;
background-color: lightgray;
}
.clearfix:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
複製程式碼得到的效果如下：
浮動的元素就可以撐開父容器的高度啦！
總結
- 浮動的元素無法撐開父容器的高度，所以需要清除浮動
- 浮動可以很簡單的實現右對齊。
- 浮動可以很簡單的實現文字環繞效果。
因此，注意浮動的使用場景，並且在需要的時候清除浮動，就可以很好的控制浮動啦~