使塊元素並排顯示和清除浮動的方法

標籤：over   並發   添加   文檔流   其他屬性   ack   size   flow   代碼   

使多個塊元素並排顯示：

①inline-block:內斂塊，不佔一行，但可以設定寬高屬性，將塊元素的display設定為inline-block，可以讓多個div塊橫向顯示。但是該用法下多個塊之間會出現空格，是由於相鄰兩個</div>與<div>之間的分行符號引起的，空格的清除辦法：

①去掉分行符號（不推薦）：頁面不美觀②注釋（不推薦）:將換行部分注釋掉③將上一行的>移到下一行（不推薦）:頁面不美觀④將要並排顯示的div添加父元素，並且給父元素div添加屬性:font-size:0;(但該種方法會有一系列並發問題需要改正)

②浮動：

文檔流：自上而下解讀文檔時，文檔是以流狀的狀態。

要並排顯示的塊元素設定屬性：float:left/right，即讓塊元素脫離文檔流漂浮起來，實際上並沒有占父元素的空間，只是顯示出來而已，使塊元素按照浮動方向移動，遇到父元素或相鄰元素邊界就停住。如代碼:

.son{    width:100px;    height:100px;    background-color:red;    }<div>    <div class="son"></div><div>

該代碼中實際父元素的height為子項目的height，獨佔一行。如果加入該屬性，見代碼：

.son{    width:100px;    height:100px;    background-color:red; float:left; }<div> <div class="son"></div></div>

則父元素的height還是為0,且獨佔一行，所以子項目並沒有在父元素中，只是向垂直於我們視線的方向上平移了。

清除浮動： 若沒有清除浮動則實際上看到有元素的位置上其實沒有元素，其他元素還是會佔該位置，所以需要清除浮動。

①overflow:hidden(還有其他屬性值：scroll、auto)

hidden可以清除浮動，還可以使溢出父元素的子項目的溢出部分隱藏

②;：可以清除浮動但會加入空標籤

③（推薦）在父元素內加入下列屬性：

.clearfix:before,.clearfix:after{    display:table; content:""; <!--該屬性只有在該偽類下可以使用--> }.clearfix:after{ clear:both; }.clearfix{ *200m:1; }

使塊元素並排顯示和清除浮動的方法