bfc是什么
bfc元素表现的特性就是一个独立的盒子,内部的子元素再怎么折腾都不会影响外部的元素和父元素,如果触发bfc,子盒子的margin和浮动不会对父盒子产生影响,所以可以用来清除浮动问题。
什么情况下可以以触发bfc。
- overflow:hidden 这种事最常用清除浮动的方法,在不会隐藏子
元素内容的情况下 - folat:left/right 但是这也会使父元素浮动
- position:absolate/fixed 这种情况会使父元素脱离标准流,也不会占用位置
- display:inline-block/table-cell 这种不常用
清除浮动的原理
<style>
.clearfix:after{ //这种清除浮动使最常用的,它清浮动的
原理是.son1的原理
content:''; 这就相当于.son1元素里不放东西是一样
display:block; //因为添加的伪元素默认为行内元素
clear:both;
}
.father{
width:300px;
background-color:pink;
}
.son{
width:100px;
height:100px;
background-color:green;
float:left;
}
.son1{
clear:both;
//因为清除浮动的元素左右不和浮动的元素待在一起,
因此左右不能有浮动元素,
所以.son1这个子元素只能存在于.son元素的下面,
所以就把父元素的高度撑了起来 。
这种清除浮动有个不好的地方就是每次都要加一个div
标签。div默认为块级元素,所以不用加display:block
div里面没有东西,所以content:''不用写
}
</style>
<div class='father'>
<div class='son'></div>
<div class='son1'></div>
</div>
网友评论