清除浮动
问题:父盒子高度为0,子盒子不占位置,子盒子不会撑开父盒子。
(下面的标准流盒子,会跑到父盒子中的子盒子下面。)
处理办法:清除浮动。(清除子盒子因为浮动,对父子造成的影响)
使用方法:谁出问题给谁加一个clearfix类名。
清除浮动方法
1 clear:both;
在最后一个浮动元素后面添加标签<div style="clear:both"></div>
2. overflow:hidden;
给父集元素使用 overflow:hidden;
扫描二维码关注公众号,回复:
10417270 查看本文章
3 单伪元素标签法
.clearfix:after{
content: “”;
height: 0;
visibility: hidden;
overflow: hidden;
dispaly: block;
clear: both;
}
.clearfix {
zoom: 1;/*IE678*/
}
4. 双伪元素标签法(最好)
.clearfix:before, .clearfix:after {
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix {
zoom: 1;/*IE678*/
}
然后在上面父盒子中加入class=“clearfix”