1. 三個關於浮動的概念 不浮動float:none; 清除周圍的浮動元素 float:both 這是清除浮動的本意 清除子元素浮動對父元素的影響 clearfix 很多人都理解成這個叫清除浮動。。 2. 什麼是清除浮動 清除浮動不是把當前標簽的浮動給清除了，如果這樣，還加浮動做什麼 其實清除浮動指 ...
1. 三個關於浮動的概念
不浮動float:none;
清除周圍的浮動元素 float:both 這是清除浮動的本意
清除子元素浮動對父元素的影響 clearfix 很多人都理解成這個叫清除浮動。。
2. 什麼是清除浮動
清除浮動不是把當前標簽的浮動給清除了，如果這樣，還加浮動做什麼
其實清除浮動指的是清楚當前元素旁邊的浮動元素，但是當前元素又不能影響別人，打不贏就跑，所以自己就跑到下麵去了。
3. 為什麼要清楚浮動
在佈局的時候我們經常希望某些內容能夠水平排布，水平排布後，由於內部內容不確定，高度不能簡單的給一個定值。而如果不給高度，子元素又都浮動了，父盒子就會因為沒有子盒子的支撐而塌陷。
利用清除浮動的這個特性，我們可以給父元素中最後一個不浮動的盒子使用clear:both從而把父盒子的高度撐起來，並且能夠根據內部內容的變化而改變高度。
4. 清楚浮動的方法
4.1. 額外標簽法
原理：單獨使用一個標簽加上clear:both跑到浮動元素下麵，從而消除子盒子浮動造成的父盒子塌陷。
典型網站：京東
優點：通俗易懂，容易掌握
缺點：添加很多無意義的空標簽，不符合結構與表現分離的原則，不利於後期維護
4.2. 父元素設置overflow：hidden
原理：讓父盒子形成BFC，BFC的特性之一就是可以承載浮動元素
優點：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素
4.3. 單偽元素
.clearfix:after {
content: "";
height: 0;
visibility: hidden;
overflow: hidden;
dispaly: block;
clear: both;
}
.clearfix {
zoom: 1;/*IE67*/
}
典型網站：新浪、網易
4.4 雙偽元素
.clearfix簡介
.clearfix:before, .clearfix:after {
content: "";
display: table;
}/*在有該類的元素內部元素的前面和後面添加元素*/
.clearfix:after {
clear: both;
}/*只要after兩側有浮動元素，after就會跑到最下麵，從而撐開帶有該類名的父盒子*/
.clearfix {
*zoom: 1;
} /*用於相容IE/7/6*/
用display:table是因為display:block有空隙
加了一個before是為了防止外邊距合併
典型網站：小米、淘寶
