目录
1. 清除浮动的原因
- 网页是高度是无限的(比如淘宝的页面是有无数的产品可以浏览的),要达到父级元素的高度要由子元素撑开的效果,这就要清除浮动。
- 子级元素是浮动的
- 浮动元素是不占位置,会影响后面元素的排版。
2. 清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响。
- 如果父级元素本身有高度,则不需要清除浮动。
- 清除浮动后,父级元素会根据浮动的子盒子自动监测高度。父级有高度则不会影响后面的标准流。
3. 语法
选择器: {clear:属性值;}
属性值 | 描述 |
left | 清除左侧浮动 |
right | 清除右侧浮动 |
both | 同时清除左右侧浮 |
注:在实际开发中,用clear:both比较经常。
清除浮动的策略是:闭合浮动。
4. 清除浮动的方法
4.1 额外标签法(隔墙法)
这是W3C推荐方法,就是在浮动元素末尾添加一个空标签。
如<div style=" clear: both"></div>或者</br>
- 优点:通俗易懂,书写简单
- 缺点:增加无意义标签,结构差
- 注意:空标签必须是块级元素!
实际工作中会遇到,但是不常用。
4.2 父级添加overflow属性(重点)
语法:选择器:{ overflow: hidden; }
属性值 | 描述 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
- 优点:代码简洁
- 缺点:无法显示溢出的部分
4.3 父级添加after属性(重点)
after伪元素法是额外标签法的升级版,给父级元素添加:(后面会详细讲解哦)
.claearfix:after {
conten: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
- 优点:无标签增加,结构清晰
- 缺点:照顾低版本浏览器,IE6-7,不兼容
- 代表网站:百度,淘宝,网易
4.4 父级添加双伪元素(重点)
.claearfix:before,.claearfix:after {
content: "";
display: table;
}
.claearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 优点:代码更简洁
- 缺点:照顾低版本浏览器,IE6-7,不兼容
- 代表网站:小米、腾讯
5. 清除浮动总结
5.1 三原因
- 父级没高度
- 子盒子浮动
- 影响后面布局
5.2 四方法
方式 | 优点 | 缺点 |
额外标签法 | 简单,易懂 | 添加无意义标签,结构差 |
父级overf:hiden | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | IE6-7浏览器不兼容 |
父级双伪元素 | 结构语义化正确 | IE6-7浏览器不兼容 |