为什么要清除浮动
有时候为了方便,父元素不设置高度,而子盒子又是浮动的,这样如果不清除浮动,就会影响后面的布局。
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
清除浮动的方法
额外标签法(隔墙法)
格式:选择器{clear: 属性值; }
属性值 | 描述 |
---|---|
left | 清除左侧浮动的影响 |
right | 清楚右侧浮动的影响 |
both | 同时清除左右两侧浮动的影响 |
其中:clear: both;
较为常用。
优点:通俗易懂,书写方便;
缺点:添加许多无意义的标签,结构化较差;
父级:overflow
可以给父级添加 overflow
属性,将其属性值设置为 hidden
、auto
或scroll
;
其中:overflow: hidden;
较为常用。
优点:代码简洁;
缺点:无法显示溢出的部分;
父级:after 伪元素
:after
方式是额外标签法的升级版,是在 css 文件中写入一个类,再给需要清除浮动的父元素添加这个类:
.clearfix:after {
content:"";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
/* IE6、7专有 */
.clearfix {
*zoom: 1;
}
优点:没有增加标签,结构更简单;
缺点:需要照顾低版本浏览器;
父级:双伪元素
和伪元素法的原理相同,额外加了一个 before 方法:
.clearfix:before, .clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6、7专有 */
.clearfix {
*zoom: 1;
}
优点:代码更简洁;
缺点:需要照顾低版本浏览器;