浮動問題和清除浮動的方法

時間 2019-12-01

標籤浮動問題清除方法简体版

原文原文鏈接

【問題】css

當一個元素是浮動的，若是沒有關閉浮動時，其父元素不會包含這個浮動元素，由於此時浮動元素從文檔流中脫離(float的影響具體可讀《float深刻剖析》一文)。以下：html

<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.out{background:blue;width:200px;}
.in1{background:#ccc;width:50px;height:50px;float:left;}
.in2{background:red;width:50px;height:50px;float:left;}
</style>
</head>
<body>
    <div class="out">out
        <div class="in1">in1</div>
        <div class="in2">in2</div>        
    </div>
</body>
</html>

out做爲in1和in2的父元素，卻不能將自身撐開容納兩者（in1和in2高都是50px，至少撐開50px，而如今卻只有18px），效果以下圖。是由於in1和in2都加了向左浮動的樣式出現了浮動問題。這就須要清除浮動讓子元素迴歸正常文檔流。chrome

【清除浮動的方法】瀏覽器

1.給父元素out也加上一個浮動佈局

<style type="text/css">
.out{background:blue;width:200px;float:left;}
.in1{background:#ccc;width:50px;height:50px;float:left;}
.in2{background:red;width:50px;height:50px;float:left;}
</style>

在w3cplus網站裏《CSS的Float之一》一文中提到還需給父元素設一個大於「50％」寬度，這有待研究。學習

優勢：不存在結構和語義化問題。網站

缺點：與父元素相鄰的元素的佈局會受到影響。不推薦。ui

2.爲浮動的子元素清除浮動。在in2後面增長一個空的div用於清除浮動，在CSS中使用clear屬性，同時應將這個空div的高與行高設爲0（其實不太懂爲何要把height和line-height都設爲0，在w3cplus裏《CSS的Float之一》一文中有提到，好像是爲了避免讓ie具備必定的空間，最好再加上font-size=0;。但是在chrome下就算不設置效果也同樣，這個有待考究）。其實我以爲叫作「關閉浮動」比較合適，由於你又想用浮動，而後又要除掉它，有點矛盾。用完浮動後把它關閉，這樣理解比較合理。spa

<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.out{background:blue;width:200px;}
.in1{background:#ccc;width:50px;height:50px;float:left;}
.in2{background:red;width:50px;height:50px;float:left;}
.clear{clear:left;height:0;line-height:0;}
</style>
</head>
<body>
    <div class="out">out
        <div class="in1">in1</div>
        <div class="in2">in2</div>    
        <div class="clear"></div>    
    </div>
</body>
</html>

out的高度變成50px，是由in1，in2撐開了：firefox

缺點：添加了無心義的空標籤，有違結構與表現的分離，後期維護難。不推薦。

3.爲父元素設置overflow屬性，設置值爲auto或hidden都行，不過不能是visible，不然沒法清除浮動。關於前二者區別，在《Clear Float》一文中提到auto對seo比較友好，hidden對seo不是太友好。

.out{
　　background:blue;width:200px;
　　overflow:auto;/*或overflow：hidden；*/
　　zoom: 1;/*在ＩＥ下觸發其layout，也要以使用_height:1%來代替zoom*/
}

優勢：不存在結構和語義化問題。

缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

4.使用clearfix的方法。如下是來自w3cplus網《Clear Float》一文的說法：

利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理相似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而clearfix利用其僞類clear:fix在元素內部增長一個相似於div.clear的效果。

只需給包含浮動元素的父元素一個clearfix的class，再對其設置相關樣式，以下所示：

<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.out{background:blue;width:200px;}
.in1{background:#ccc;width:50px;height:50px;float:left;}
.in2{background:red;width:50px;height:50px;float:left;}
.clearfix:before,
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden;}
 .clearfix:after {clear: both;}
.clearfix{zoom:1;/*IE<8*/}

</style>
</head>
<body>
    <div class="out clearfix">out
        <div class="in1">in1</div>
        <div class="in2">in2</div>                
    </div>
</body>
</html>

其實只使用clearfix:after就能夠達到清除浮動的效果，但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug……因此爲了讓瀏覽器兼容這個clearfix的清除浮動，在原來的基礎上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題。

以上是該文做者大漠所說的。而在《那些年咱們一塊兒清除過的浮動》一文中做者認爲：

clearfix:before是用來處理margin邊距重疊的，因爲內部元素 float 建立了BFC，致使內部元素的margin-top和上一個盒子的margin-bottom 發生疊加。若是這不是你所但願的，那麼就能夠加上before，若是隻是單純的閉合浮動，after就夠了！並非如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，這不是bug，是BFC應該有的特性。

五、在《那些年咱們一塊兒清除過的浮動》一文中還提到了在父元素設置display：table;的方法。還有在浮動元素後添加<br>標籤並設置屬性clear:all;的方法。

　　文後還有對爲何overflow:hidden;能夠清除浮動問題的探究，能夠學習。截取一段該文對使用僞元素清除浮動各行代碼的解釋學習學習，由於我不懂。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;

4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

相關標籤/搜索

每日一句

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