文章目錄
-
-
- 1. 為什麼要清除浮動
- 2. 排版問題示例
- 3. 清除浮動本質及政策
- 4. 清除浮動方案
-
- 4.1 額外标簽法
- 4.2 父級添加overflow
- 4.3 :after僞元素法
- 4.4 雙僞元素清除浮動
- 5. 小結
-
- 5.1 清除浮動前提條件
- 5.2 方案對比
-
1. 為什麼要清除浮動
大白話：由于父級盒子在很多情況下，不友善給出确定高度(eg. 圖一)，但是子盒子開啟浮動後，脫離了文檔流，不再占有位置，最後父級盒子高度為0，就會影響下面的标準流盒子。
術語：由于浮動元素不再占用原文檔流的位置，是以會對其父容器後面的元素排版産生影響。
2. 排版問題示例
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: chocolate;
}
.wangcai{
float: left;
width: 100px;
height: 100px;
background-color: chartreuse;
}
.xiaoqiang{
float: left;
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.footer{
width: 100%;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="wangcai">旺财</div>
<div class="xiaoqiang">小強</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
效果：
預期效果為
footer
在
旺财
和
小強
的下面，而在
旺财
和
小強
開啟浮動後，脫離标準流，導緻其父
.box
高度
(内容自适應)，影響了
footer
的布局排版。
3. 清除浮動本質及政策
文法：在
css
中，設定
clear:屬性值
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素(清除左側浮動的影響) |
| right | 不允許右側有浮動元素(清除右側浮動的影響) |
| both | 同時清除左右兩側浮動的影響) |
清除浮動的本質就是清除浮動元素脫離标準流造成的影響。
一般，在實際工作中，使用
both
居多。
清除浮動的政策是：
閉合浮動
，隻讓浮動在父盒子内部影響，不影響父盒子外面的其他盒子。
4. 清除浮動方案
4.1 額外标簽法
額外标簽法，也成為隔牆法，是W3C推薦的做法。
該方法會在浮動元素末尾添加一個空的标簽，例如
<div style="clear:both"></div>
或其它标簽。
注意：這個空标簽必須是塊級元素。
優點：通俗易懂，友善簡單
缺點：添加許多無意義的标簽，結構化差
實踐如下：
.clear{
clear: both;
}
<body>
<div class="box">
<div class="wangcai">旺财</div>
<div class="xiaoqiang">小強</div>
<div class="clear"></div>
</div>
<div class="footer">
footer
</div>
</body>
效果如下：
4.2 父級添加overflow
子不教，父之過。
可以給浮動元素父級添加
overflow
屬性，将其屬性值設定為
hidden
、
auto
或
scroll
。
示例如下：
.box{
background-color: chocolate;
overflow: hidden;
}
<div class="box">
<div class="wangcai">旺财</div>
<div class="xiaoqiang">小強</div>
</div>
<div class="footer">
footer
</div>
效果：
優點：代碼簡介
缺點：無法顯示溢出的部分或不是預期效果。
4.3 :after僞元素法
:after
方式其實是額外标簽發的更新版，也就是給父元素添加如下屬性：
.box::after{
content: "";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
/* IE 6、7适配 */
.box {
*zoom: 1;
}
<div class="box">
<div class="wangcai">旺财</div>
<div class="xiaoqiang">小強</div>
</div>
<div class="footer">
footer
</div>
效果如圖：
優點：沒有增加标簽，結構更簡單
缺點：需适配低版本浏覽器
代表網站：百度、網易等
4.4 雙僞元素清除浮動
有點類似
4.3
，隻不過又通過
:before
添加了前置僞元素，代碼如下：
.box::before,.box::after{
content: "";
display: table;
}
.box::after{
clear: both;
}
/* IE 6、7适配 */
.box{
zoom: 1;
}
<div class="box">
<div class="wangcai">1</div>
<div class="xiaoming">2</div>
</div>
<div class="footer">
footer
</div>
效果圖：
優點：代碼更簡潔
缺點：需适配低版本浏覽器
代表網站：小米、騰訊等
5. 小結
5.1 清除浮動前提條件
- 父級沒有高度
- 子盒子開啟浮動
- 影響後續布局排版
5.2 方案對比
| 方式 | 優點 | 缺點 |
|---|---|---|
| 額外标簽發(隔牆法) | 通俗易懂，書寫友善 | 添加許多無意義标簽，結構化差 |
| 父級overflow:hidden | 書寫友善 | 溢出隐藏等 |
| 父級after僞元素 | 結構語義化正确 | IE6-7不支援after，相容問題 |
| 父級雙僞元素 | 結構語義化正确 | IE6-7不支援after，相容問題 |