CSS3浮動與清除浮動
浮動的設計初衷：實現文字環繞效果。
浮動的特徵：脫離標準文件流，導致父元素高度塌陷，向左或者向右浮動直到遇到其他的浮動元素。
浮動產生的原因：盒子裡的子元素使用了浮動屬性，脫離了文件流，導致父元素無法被撐開。
浮動造成的副作用：父級的背景無法顯示，父級的邊框無法被撐開，以及父級與子級之間的margin和padding遭到破壞。
清除浮動的方法：
方法一：在底部插入“clear:both”宣告的元素。
原理：在底層元素新增clear屬性來清除浮動，是因為clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，即清除所有浮動。
方案1：HTML層面，在浮動元素後面使用一個空元素，如<div...></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.div_first{
width: 300px;
border:2px solid red;
}
.div_second{
width 方案二：CSS層面，使用after偽元素,推薦使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.div_first{
width: 300px;
border:2px solid red;
}
.div_second{
width: 100px;
height:100px;
background: #2A2626;
float:left;
}
.div_third{
width: 200px;
height: 200px;
background: #12ED31;
float: left;
}
.clearfix:after{
clear:both;
height:0;
content:"";
overflow:hidden;
display:block;
}
.clearfix{
*zoom:1;/*相容ie6,ie7*/
}
</style>
</head>
<body>
<div class="div_first clearfix">
<div class="div_second"></div>
<div class="div_third"></div>
</div>
</body>
</html>其中clearfix可以精簡為：
.clearfix:after{
clear:both;
content:"";
display:table;
}方法二：讓父元素BFC（IE8+）或者haslayout(IE6/IE7)
BFC:塊狀格式化上下文，特徵：BFC容器是一個隔離的容器，和其他元素互不干擾；我們可以用觸發兩個元素的BFC來解決垂直邊距摺疊問。BFC可以包含浮動，清除浮動；通常用來解決浮動父元素高度坍塌的問題。
給父元素新增以下屬性來觸發BFC：
- float：left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/……
例如給父級元素設定overflow:hidden來清除浮動
.div_first{
width: 300px;
border:2px solid red;
overflow:hidden;
}總結：通常使用after偽元素作為清除浮動主要方式。.clearfix只應用在浮動元素的父級元素上。
浮動的注意點：脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。而對於使用position:absolute脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。