CSS技巧:清除浮動

時間 2019-11-21

標籤 css 技巧清除浮動欄目 CSS 简体版

原文原文鏈接

浮動元素容器的clearing問題
1. 問題的由來
有這樣一種情形：在一個容器（container）中，有兩個浮動的子元素。
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
在瀏覽器中一運行，就會出現意想不到的結果。實際視圖是子元素顯示在父容器的外部。
2. 問題的緣由與浮動定位有關。
在CSS規範中，浮動定位不屬於正常的頁面流（page flow），是獨立定位的。因此，只含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在同樣。這就形成了顯示出來，父容器好像空容器同樣。

3.解決方法一：添加空元素
經典的解決方法，就是在浮動元素下方添加一個非浮動元素。
代碼這樣寫：
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
原理是父容器如今必須考慮非浮動子元素的位置，然後者確定出如今浮動元素下方，因此顯示出來，父容器就把全部子元素都包括進去了。這種方法比較簡單，可是要在頁面中增長冗餘標籤，違背了語義網的原則。

4.解決方法二：浮動的父容器
另外一種思路是，索性將父容器也改爲浮動定位，這樣它就能夠帶着子元素一塊兒浮動了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
這種方法不用修改HTML代碼，可是缺點在於父容器變成浮動之後，會影響到後面元素的定位，並且有時候，父容器是定位死的，沒法變成浮動。

5.解決方法三：浮動元素的自動clearing
讓父容器變得能夠自動"清理"（clearing）子元素的浮動，從而可以識別出浮動子元素的位置，不會出現顯示上的差錯。javascript

要作到這點，只要爲父容器加上一條"overflow: hidden"的CSS語句就好了。關於爲什麼父容器能夠自動識別：因爲加上overflow:hidden以後要計算超出的大小來隱藏，因此父容器會自動撐開本身把全部的子元素放進去，同時會計算浮動的子元素。html

代碼這樣寫：java

<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
這種方法的缺點主要有二個，一個是IE 6不支持，另外一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。

6.解決方法四：能不能經過CSS語句添加子元素呢，這樣就不用修改HTML代碼了？
回答是能夠的，咱們知道CSS語句中有一個:after僞選擇符，就能夠在父容器的尾部自動建立一個子元素，這正好符合咱們的須要。
下面的代碼參照了lifesinger的寫法：
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名稱，"content:"020";"是在父容器的結尾處放一個空白字符，"height: 0;"是讓這個這個空白字符不顯示出來，"display: block; clear: both;"是確保這個空白字符是非浮動的獨立區塊。
可是，:after選擇符IE 6不支持，也就是說上面的這段代碼在IE 6中無效，這怎麼辦？
咱們添加一條IE 6的獨有命令"zoom:1;"就好了，這條命令的做用是激活父元素的"hasLayout"屬性，讓父元素擁有本身的佈局。IE 6會讀取這條命令，其餘瀏覽器則會直接忽略它。

7.最終代碼
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}

8.附錄什麼是hasLayout
IE使用Layout概念來控制元素的尺寸和位置。若是一個元素有Layout，它就有自身的尺寸和位置；若是沒有，它的尺寸和位置由最近的擁有佈局的祖先元素控制。
在默認狀況下，擁有Layout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
（注意，<p>和<div>默認不擁有Layout。）
凡是具備如下CSS屬性的元素，也會擁有佈局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE專用屬性）
writing-mode: tb-rl（IE專用屬性）
overflow: hidden|scroll|auto（只對IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只對IE 7及以上版本有效）瀏覽器

hasLayout是IE特有的屬性，不是CSS屬性。能夠用JavaScript函數hasLayout查看一個元素是否擁有Layout。若是有，這個函數就返回true；不然返回false。hasLayout是一個只讀屬性，因此沒法使用Javascript進行設置。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。