2020-03-01

关于BFC的理解

BFC是什么？

直译为格式上下文:创建一个盒子，盒子内部元素布局不影响盒子外部元素

BFC出发条件:

1.html元素是一个BFC盒子
2.float不为none的浮动元素
3.position为absolute和fixed的元素
4.display为inline-block;table-cell;flex;inline-flex
5.overflow除了visible元素

BFC的布局规则:

1.BFC内部盒子在垂直方向上依次放置
2.盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
3.内部每个盒子的margin-left会触碰到容器的border-left，浮动盒子也是这样
4.bfc区域不会和浮动元素重叠
5.计算bfc高度时，浮动元素会参与计算
6.bfc里面的子元素不会影响到外面的元素

BFC的应用

1.解决浮动塌陷问题

当父元素中只有浮动元素且父元素未设置高度和宽度时，由于浮动元素脱离文档流，所以父元素没有内容，高和宽塌陷为0
解决方法:将盒子都设为BFC盒子

2.解决同一个bfc下盒子的margin重叠问题

当父元素中子元素的margin-top比父盒子的还要大时，由于都属于html根元素下的bfc，所以垂直方向会发生重叠，取最大值
解决方法:将父元素设置为BFC overflow:hidden;
逆战班-屈县波