CSS清浮動處理（Clear與BFC）

時間 2019-11-18

標籤 css 浮動處理 clear bfc 欄目 CSS 简体版

原文原文鏈接

在CSS佈局中float屬性常常會被用到，但使用float屬性後會使其在普通流中脫離父容器，讓人很苦惱css

1 浮動帶來佈局的便利，卻也帶來了新問題

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Clear float</title>
 6     <style type="text/css">
 7         .container{
 8             margin: 30px auto;
 9             width:600px;
10             height: 300px;
11         }
12         .p{
13             border:solid 3px #a33;
14         }
15         .c{
16             width: 100px;
17             height: 100px;
18             background-color: #060;
19             margin: 10px;
20             float: left;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="p">
27             <div class="c"></div>
28             <div class="c"></div>
29             <div class="c"></div>
30         </div>
31     </div>
32 </body>
33 </html>

咱們但願看到的效果是這樣的html

但結果倒是這樣的瀏覽器

父容器並無把浮動的子元素包圍起來，俗稱塌陷，爲了消除這種現象，咱們須要一些清除浮動的技巧。佈局

2 如何清理浮動

清理浮動通常有兩種思路spa

利用 clear屬性，清除浮動
使父容器造成BFC

分別看一下3d

2.1 利用 clear屬性，清除浮動

clear屬性是個什麼東東呢？clear 屬性規定元素的哪一側不容許其它以前浮動元素，修改一下剛纔代碼code

<div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></div>
</div>

第二個div添加了clear:both屬性後，其左側的div（第一個div）再也不浮動，因此後面的div都還行(huan hang)了。咱們能夠利用這點兒在父容器的最後添加一個空的div，設置屬性clear:left，這樣就能夠達到咱們目的了。orm

2.1.1 添加空div清理浮動

對咱們剛纔代碼稍做修改htm

<div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>

也就是在父容器最後添加 blog

<div style="clear:left;"></div>

看看效果

果然好使了，有些同窗看了後可能感受奇怪，爲何想上一個例子修改第二個div

<div class="c" style="clear:left;"></div>

沒有變成這樣的效果

說一下本身的拙見，clear:left屬性只是消除其左側div浮動對它本身形成的影響，而不會改變左側div甚至於父容器的表現，在父容器看來，三個div還都是float的，因此高度依舊塌陷。可是咱們在最後添加了一個非浮動的div，因爲它有clear:left屬性，因此它會按照左側div不浮動來定位本身，也就是定位到下一行，而父容器看到有一個非浮動、普通流的子元素元素，會將其包圍，這樣形成了順便也把三個浮動元素也包裹起來的效果，高度再也不塌陷（不知道說明白沒有或者這種理解對不對，還望明白的同窗指點）。

固然除了添加div，還能夠添加br等其它html元素，原理相同，再也不贅述。

2.1.2 使用CSS插入元素

上面的作法瀏覽器兼容性不錯，可是有個很大的問題就是向頁面添加了內容來達到改變效果的目的，也就是數據和表現混淆，既然是變現，看看怎麼使用CSS來解決這一問題。根本的作法仍是向父容器最後追加元素，但咱們能夠利用CSS的:after僞元素來作此事。

添加一個類 floatfix

.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}

對父容器添加此類

<div class="p floatfix">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

這樣咱們就能夠看到正確效果了

簡單解釋一下，對父容器添加floatfix類後，會爲其追加一個不可見的塊元素，而後設置其clear屬性爲left，和剛纔原理相似。

2.1.3 大師手筆

Nicolas Gallagher 在A new micro clearfix hack中提供了一種看起來更清爽的作法

.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

Nicolas Gallagher原文中還有:before是爲了處理margin邊距重疊，本文中沒有列出來。

有同窗會提出來了上面方法看起來不錯，可是IE六、7不支持僞元素怎們辦？這就須要咱們使用BFC/haslayout的姿式了

2.2 使父容器造成BFC

通過了前些日子園裏關於BFC的狂轟濫炸相信你們都對BFC有了必定的瞭解，不過癮的同窗能夠看看 Block Format Content，BFC有三個特性

BFC會阻止垂直外邊距（margin-top、margin-bottom）摺疊

按照BFC的定義，只有同屬於一個BFC時，兩個元素纔有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。

所以要解決margin重疊問題，只要讓它們不在同一個BFC就好了，可是對於兩個相鄰元素來講，意義不大，沒有必要給它們加個外殼，可是對於嵌套元素來講就頗有必要了，只要把父元素設爲BFC就能夠了。這樣子元素的margin就不會和父元素的margin發生重疊了。
BFC不會重疊浮動元素
BFC能夠包含浮動

咱們能夠利用BFC的第三條特性來「清浮動」，這裏其實說清浮動已經再也不合適，應該說包含浮動。也就是說只要父容器造成BFC就能夠，簡單看看如何造成BFC

float爲 left|right
overflow爲 hidden|auto|scroll
display爲 table-cell|table-caption|inline-block
position爲 absolute|fixed

咱們能夠對父容器添加這些屬性來造成BFC達到「清浮動」效果

2.2.1 利用float來使父容器造成BFC

簡單修改一下代碼

<div class="p" style="float:left;">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

這樣咱們能夠獲得結果

咱們能夠看到父容器高度沒有塌陷，可是長度變短了，由於div應用float‘後會根據內容來改變長度，這個在不少時候頗有用，可是咱們不但願有這種效果怎麼辦？

2.2.2 使用BFC的其它侷限

上面提到使用BFC使用float的時候會使父容器長度縮短，並且還有個重要缺陷——父容器float解決了其塌陷問題，那麼父容器的父容器怎麼辦？難道要所有使用folat嗎（確實有這種佈局方式卻是）。BFC的幾種方式都有各自的問題，overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是咱們不但願的，display這幾種方式依然沒有解決低版本IE問題。。。

看起來仍是第一種方式比較好，但是低版本IE該怎麼辦呢？

2.2.3 hasLayout

咱們知道在IE六、7內有個hasLayout的概念，不少bug正式由hasLayout致使的，當元素的hasLayout屬性值爲false的時候，元素的尺寸和位置由最近擁有佈局的祖先元素控制。當元素的hasLayout屬性值爲true的時候會達到和BFC相似的效果，元素負責自己及其子元素的尺寸設置和定位。咱們能夠利用這點兒在IE六、7下完成清浮動，先看看怎麼使元素hasLayout爲true

position: absolute
float: left|right
display: inline-block
width: 除「auto」外的任意值
height: 除「auto」外的任意值
zoom: 除「normal」外的任意值
writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可使hasLayout爲true

3 一個相對靠譜的解決方案

通過上面的比較咱們能夠得出一個相對靠譜的解決方案

在IE+、現代瀏覽器上使用僞元素
在IE六、7使用hasLayout

具體應該使用哪一種方式來使元素hasLayout爲true呢？相對而言zoom：1比較好，由於不會形成其它影響。想形成只在IE六、7上使用某些CSS的效果，咱們還得須要一些CSS hack的知識，感興趣同窗能夠看看 CSS hack，咱們能夠寫出這樣的CSS

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

4 最後

雖然咱們得出了一種瀏覽器兼容的靠譜解決方案，但這並不表明咱們必定得用這種方式，不少時候咱們的父容器自己須要position：absolute等造成了BFC的時候咱們能夠直接利用這些屬性了，你們要掌握原理，活學活用。總而言之清理浮動兩種方式

利用 clear屬性，清除浮動
使父容器造成BFC

相關標籤/搜索

每日一句

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