一:什么是BFC
官方文档介绍:一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素
<div class="1">
<div class="2"></div>
<div class="3"></div>
<div class="a1">
<div class="a2></div>
</div>
</div>
1,每一个BFC区域只包括其子元素,不包括其子元素的子元素。(BFC 1不包含a2的元素。a1只包含a2)
2,每一个BFC区域都是独立隔绝的,互不影响
二:怎样使一个元素变成BFC区域
大概有以下几种办法:
·body根元素
·(子)设置浮动,不包括none
·(子)设置定位,absoulte或者fixed
·(子)行内块显示模式,inline-block
·(父)设置overflow,即hidden,auto,scroll
·(父)弹性布局,flex
·表格单元格,table-cell
三:解决问题
1,解决外边距margin的塌陷问题(垂直塌陷)
当两个相邻的盒子都要100px 的margin 时,距离应该有200px,但实际中只有100px。
在写移动端页面的时候,margin-bottom 不生效的时候,在父盒子overflow:hidden。
解决:给两个盒子都加一个父元素 div ,并设置成BFC区域。如:overflow:hidden
2,利用BFC解决包含塌陷
给子元素加margin-top:20可能时会带着父元素(父元素变margin-top:20)一起跑,变成父元素外边距 margin-top:20px。
解决:只需要将父元素变为BFC区域,将父盒子变成一个独立的区域,这样在BFC区域内部的任何操作,都不会影响到外部
3.清除浮动。
浮动会导致父元素高度塌陷。overflow:hidden可以清除浮动。BFC区域内的子元素任何边动都是不会影响到外部元素的。
4.BFC可以阻止标准流元素被浮动元素覆盖
浮动的元素会脱离文档流,跑到上一个层面,也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。
<div class="aa"><div>
<div class="bb"></div>
.aa {
width:300px;
height:100px;
}
.bb {
}