清除浮动
为什么要清除浮动
父盒子不方便给高度时,但子盒子浮动就不占位置,父盒子高度坍塌,因此需要清除浮动。
清除浮动的本质
为解决父级元素因为子元素引起内部高度为0的问题,清除浮动后,父级就会根据浮动的子盒子自动检测高度,设置父级高度。
清除浮动的三种方式
在css中 使用clear 清除
选择器 {clear:属性值;} clear 清除
left 不允许left 有浮动
right 不允许right 有浮动
both 同时清除左右两侧浮动的影响
在实际工作中,几乎只用clear:both;
额外标签法
w3c推荐在后 为 clear 的div空盒子 设置clear:both属性;
缺点:增加了额外标签,不推荐使用。
给父级元素添加overflow方法
给父级元素 添加overflow:hidden auto scroll 都可以实现
优点 添加方式简单,容易造成不会自动换行 导致内容被隐藏掉,无法显示溢出的元素
使用after伪元素
:after 是 额外标签的升级写法,
.clearfix:after{content:"",display:block; height:0; clear:both; }
使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clear:after {
clear:both;
}
.clearfix {
*zoom:1;
}