高度塌陷，清除浮動---CSS必備的盒子模型知識！

文檔流

 

一、元素在文檔流中的特色：

 

​     塊元素：在文檔流中獨佔一行；在文檔流中默認寬度是父元素的100%，默認高度是被內容撐開。

 

​     內聯元素：在文檔流中只佔自身大小，若是一行不足以容納多個內聯元素就會換到下一行繼續從左向右排列；

 

​                       高度是被內容撐開的。

 

二、元素脫離文檔流後，高度寬度都被內容撐開（內聯元素脫離文檔流後會變成塊元素）。

 

 

浮動

 

一、塊元素在文檔流中默認垂直排列，若但願塊元素在頁面水平排列，則經過使用float使元素浮動脫離文檔流。

 

二、元素脫離文檔流後，他下邊的元素會馬上向上移動。

 

三、元素浮動後會儘可能往頁面的左上或右上浮動，直到遇到**父元素**的邊框

　　(body也算一個邊框)或其餘浮動元素。

 

​      浮動的元素會蓋住文檔流元素（若二者不是父子元素的關係）。

 

四、若浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素（獨佔一行）。

 

五、浮動元素不會超過它上邊的兄弟元素（一行容不下全部浮動元素，則其餘浮動元素會自動換行）。

 

 

高度塌陷問題

 

一、子元素無內容或浮動後，父元素高度坍塌，下面全部的元素都會往上頂，頁面佈局會混亂。

 

二、開啓BFC的元素有如下特性：

 

​      a、父元素的垂直外邊距不會和子元素重疊；

 

​      b、不會被浮動元素覆蓋；

 

​      c、**能夠包含浮動的子元素**。

 

三、如何開啓（推薦）：給父元素添加overflow：hidden；

 

​      ie6如下瀏覽器不支持BFC，但能夠經過開啓haslayout來解決———將元素的zoom設置爲1。

 

.box1{

 

​      zoom:1;

 

​    overflow:hidden;

 

}

 

 

高度塌陷解決方案

 

一、方案一：用clear清除其餘浮動元素對當前元素的影響。

 

​      clear  可選值：none 不清除浮動；

 

​                              left：清除左側浮動元素對當前元素的影響；

 

​                              right：清除右側浮動元素對當前元素的影響；

 

​                              both：清除兩側浮動元素對當前元素的影響；

 

​                                           （其實是清除對當前元素影響最大的那個元素的浮動）

 

二、方案二：在高度塌陷的父元素最後添加一個空白的div。

 

​         用這個空白的div來撐開父元素的高度再對其消除浮動。

 

​         對空白div有：clear:both;

 

 

模板

 

clearfix:after{ 

 

​        content:"";

 

​         display:block;

 

​        clear:both;

 

}

 

clearfix{

 

​      zoom:1;

 

}

 

<div class="boxn  clearfix">

 

<!--誰塌就給誰加clearfix-->