清除浮動

時間 2019-11-09

標籤清除浮動简体版

原文原文鏈接

在html佈局中會用到浮動，可是使用不當會使頁面達不到想要的效果。先來看一個由浮動形成bug的例子：css

html代碼：html

<body>
<div class="float_box">
     <div class="float_left">左浮動元素</div>
     <div class="float_right">右浮動元素</div>
</div>
<div class="no_float">測試由於浮動致使該容器所處的位置</div>
</body>

css代碼：chrome

<style type="text/css">
.float_left {
    float:left; /* 將元素左浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #FF0000;
    color:white;
}
.float_right {
    float:right; /* 將元素右浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #0000FF;
    color:white;
}
.float_box {
    background-color:#AAAAAA;
} /* 包含浮動元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮動元素而影響到的內容 */
</style>

獲得的效果：瀏覽器

從效果圖能夠看到不只 class爲no_float的div飄到了頁面最上面，就連class爲float_box的div的背景顏色也沒法正常顯示了。爲了消除浮動帶來的問題，須要利用‘清除浮動’技術來解決。佈局

1.利用br標籤中的clear屬性清除浮動測試

<body>
<div class="float_box">
     <div class="float_left">左浮動元素</div>
     <div class="float_right">右浮動元素</div>
     <br clear="all">
</div>
<div class="no_float">測試由於浮動致使該容器所處的位置</div>
</body>

注：br的位置，是在包含有浮動元素的div內部。此外在FF瀏覽器看到類名爲float_box的div標籤已經有了背景，可是IE瀏覽器（IE7及如下）還不能正常顯示背景色,這是IE瀏覽器中的haslayout問題形成的。爲了糾正IE瀏覽器的兼容問題，須要對css中的.float_box進行修改spa

<style>
.float_box {
    background-color:#AAAAAA;
    zoom:1; /* 修正IE瀏覽器中haslayout的問題 */
} /* 包含浮動元素的容器 */
</style>

此時獲得的結果是：code

2.利用css樣式中的clear屬性清除浮動（存在兼容問題）htm

能夠利用添加行間樣式，來清除浮動，這也我經常使用的方法。代碼以下：blog

<style type="text/css">
.float_left {
    float:left; /* 將元素左浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 將元素右浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #0000FF;
}
.float_box {
    background-color:#AAAAAA;zoom:1; /* 修正IE瀏覽器中haslayout的問題 */
} /* 包含浮動元素的容器 */
.no_float { clear:both;/* 清除相鄰的浮動效果 */
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮動元素而印象到的內容 */
</style>

<body>
<div class="float_box">
    <div class="float_left">左浮動元素</div>
    <div class="float_right">右浮動元素</div>
</div>
<div class="no_float">測試由於浮動致使該容器所處的位置</div>
</body>

這種寫法減小了一個無心義的空標籤，而且達到了清除浮動的效果：

FF瀏覽器，chrome瀏覽器，IE8及以上瀏覽器：

IE7及如下元素：

注：在IE7及其如下版本的瀏覽器中經過zoom結合clear屬性將浮動元素屬性清除，而且讓浮動元素的父級自適應高度，但此時對於FF瀏覽器而言只能清除浮動，沒法自適應高度。zoom屬性是IE瀏覽器私有的屬性。不過有時咱們不會給浮動元素的父級添加背景，此時可使用這種方法。

3.利用css樣式中的overflow屬性清除浮動

代碼以下：

<style type="text/css">
.float_left {
    float:left; /* 將元素左浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 將元素右浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #0000FF;
}
.float_box {overflow:hidden; /* 清除元素自身的由於浮動致使的瀏覽器解析問題 */
    background-color:#AAAAAA;zoom:1;
} /* 包含浮動元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮動元素而印象到的內容 */
</style>

<body>
<div class="float_box">
    <div class="float_left">左浮動元素</div>
    <div class="float_right">右浮動元素</div>
</div>
<div class="no_float">測試由於浮動致使該容器所處的位置</div>
</body>

注:這種方式比較簡單，不過一樣存在一些問題，例如當類名爲float_box的div中有內容超出div後會被隱藏掉。

4.利用僞類：after後續控制的高度爲零的僞類層清除浮動

雖然IE7及其如下瀏覽器不支持僞類層的效果，可是咱們仍是能夠利用在偏向標準的瀏覽器中支持僞類層的效果解決浮動產生的問題，清除浮動的條件之一是必須在浮動元素以後，所以咱們使用:after僞類就能夠了。並且在清除浮動的同時要將僞類層中的內容清空，並將高度和行高等元素設置爲0，避免由於引用了：after僞類而生成的僞類層出現其餘的內容。+

<style type="text/css">
.float_left {
    float:left; /* 將元素左浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 將元素右浮動 */
    width:200px;
    height:100px; /* 設置該元素的寬度和高度屬性 */
    border:2px solid #0000FF;
}
.float_box {
    background-color:#AAAAAA;
    zoom:1; /* 針對IE瀏覽器產生haslayout效果清除浮動 */
} /* 包含浮動元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮動元素而印象到的內容 */
.clearFix:after {
    clear:both; /* 清除僞類層以上的浮動 */
    display:block;
    visibility:hidden; /* 設置僞類層內容爲塊元素且可見 */
    height:0;
    line-height:0; /* 設置僞類層中的高度和行高爲0 */
    content:""; /* 將僞類層中的內容清空 */
} /* 利用:after僞類層清除浮動 */
.clearFix{
    zoom: 1;/*針對IE瀏覽器產生haslayout效果清除浮動*/
}
</style>

<body>
<div class="float_box clearFix">
    <div class="float_left">左浮動元素</div>
    <div class="float_right">右浮動元素</div>
</div>
<div class="no_float ">測試由於浮動致使該容器所處的位置</div>
</body>

注：利用僞類清除浮動的時候咱們給浮動元素的父元素又添加了一個類名，利用這個新類名的僞類來清除浮動。這樣作的目的是由於，若是忽然有需求變動，原來的浮動元素再也不要求浮動，那麼批量修改的話，只須要去掉clearFix這個類名就能夠了。

相關標籤/搜索

每日一句

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