css 三（清除浮動專題）

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 {<br>　　　　　　　　content: "";<br>　　　　　　　　height: 0;<br>　　　　　　　　visibility: hidden;<br>　　　　　　　　overflow: hidden;<br>　　　　　　　　dispaly: block;<br>　　　　　　　　clear: both;<br>　　　　}<br>
　　　　.clearfix {<br>　　　　　　　　zoom: 1;/*IE67*/<br>　　　　}

　　　　典型網站：新浪、網易

　　4.4       雙偽元素

　　　　.clearfix簡介

　　　　.clearfix:before, .clearfix:after {<br>   　　　　　　 content: "";<br>    　　　　　　display: table;<br>
　　　　}/*在有该类的元素<strong>内部元素</strong>的前面和后面添加元素*/

　　　　.clearfix:after {<br>　　　　　　　　clear: both;<br>　　　　}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/<br>　　　　.clearfix {<br>　　　　　　　　*zoom: 1;<br>　　　　} /*用于兼容IE/7/6*/

 　　　　用display:table是因為display:block有空隙

　　　　加了一個before是為了防止外邊距合併

 　　　　典型網站：小米、淘寶