清除浮动的四种方式:
标准流:在标准流里面,父盒子若是没有定义高度,高度就会依靠子元素撑开,若子元素设置了浮动,父元素的高度就会变成0,(浮动的元素脱离了文档流),影响了布局。
清除浮动的本质:解决父元素由于子级元素浮动引起的内部高度为0的问题。
清除浮动的方式:
1.给父元素写死高度,缺点就是高度写死了,不方面
2.额外标签法:给谁清除浮动,就在其后额外添加一个空白标签。注意空元素的放置位置,缺点就是页面中会多出无意义的div标签,比如:
clear {
clear: both;
/* 清除浮动后,父级元素会自动检测孩子的高度,以最高的为准 */
}
<div class="father">
<div class="son">我是儿子元素</div>
<div class="clear"></div>
</div>
.
3.为父级元素添加overflow方法:这种方式是通过触发BFC(块级格式化上下文),实现清除浮动的效果
overflow:hidden或者overflow: auto
;设置了overflow属性后,就会触发元素的BFC,BFC元素具有的特性:普通的块级元素不能够识别浮动子元素的高度,所以出现高度塌陷的问题,而BFC块级元素能够识别浮动元素,浮动元素会参与BFC元素高度的计算,从而解决高度塌陷的问题。
4.使用afte伪元素清除浮动:
.clearfix:after {
content: "";
display: block;
clear: both;
visiblity: hidden;
height: 0;
}
.clearfix {
*zoom: 1;
/* ie6支持伪元素,*zoom1是ie6清除浮动的方式 ,其他的浏览器不会识别这句话*/
}
父元素添加上.clearfix类名.
.clearfix:after,
.clearfix:before {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
/* ie6支持伪元素,*zoom1是ie6清除浮动的方式 */
}
父元素上也是加上类名.clearfix