BFC概念及应用

定义

块级格式化上下文

 

特性

1、内部box在垂直方向，一个接一个放置

2、box垂直方向的间距由margin决定

   属于同一个BFC的相邻box的margin会发生重叠（外边距重叠）

     解决方法：给父元素加overflow：hidden，并把其中一个子元素放进另一个box中 

3、每个子元素的margin-left与包含块的左边（父元素且有相对定位和boeder-left）相接触（对于从左往右的格式化，否则相反）浮动也一样

    即margin-left和border-left相挨着

4、BFC区域不会与任何浮动元素（float box）发生重叠

    触发条件中的（2、4、5）可解决重叠问题

    可实现自适应两栏布局

    一个给宽且固定并左浮动，一个不给宽但用overflow：hidden/auto/scroll或者用display：flex，超出页面用overflow：hidden隐藏

5、独立的区域，且容器内的子元素不会影响到容器之外的元素，反之也一样

6、计算BFC高度时，浮动元素也会参与计算（默认下，浮动元素不参与计算）

    可解决高度塌陷

 

触发条件

1、根元素    html

2、float属性值不为none时

3、position为absolute或者fixed时

4、display为inline-block、table-cell、table-caption、flex、inline-flex时

5、overflow不为visible时

    只要满足以上任何一条，都会触发BFC，且是父元素触发