文章目录
-
-
- 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，兼容问题 |