HTML + CSS之BFC

------------恢复内容开始------------

在学习前端后，BFC这个概念也前前后后接触了好几次，但是总是会记不住相关的东西，自己想了下平时无形中也在用，只是可能概念方面就鲜少提及，准备梳理下相关的内容，以后查找起来也方便...

BFC（Block Format Context）块级格式化上下文，简单的理解就是页面中一块独立的区域，区域内的元素排版布局不影响外部，外部的区域也不会影响到BFC内部的元素。

 

BFC的规则：

1.在BFC中，元素总是在垂直方向上一个接一个的排列；

2.盒子与盒子间垂直方向的距离由margin决定，属于同一个BFC的盒子间垂直margin会发生重叠；

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；

4.BFC区域不会与浮动盒子产生交集，而是紧贴着浮动边缘；

5.BFC区域在计算盒子高度时会算上浮动盒子和定位盒子的高度。

 

BFC的应用：

（1）清除内部元素的浮动。给父盒子添加：overflow:hidden就能清除内部元素的浮动，父盒子的高度能被子盒子撑开；

（2）解决盒子间垂直margin重叠的问题。两个盒子间的垂直margin会发生重叠，给其中一个盒子套上一个父盒子并设置：overflow:hidden，触发BFC，使得两个盒子不在同一个BFC里，也就不会发生垂直margin重叠的现象；

（3）使得右侧盒子自适应。形成BFC的盒子不会与浮动盒子产生交集，而是紧贴浮动盒子的边缘。

 

BFC的触发：

（1）元素的display属性为inline-block,table-cell,flex,inline-flex,table-caption

（2）元素的float属性不为none;

（3）元素的overflow不为visible;

（4）元素的position属性为absolute或flxed。