BFC (Block formatting context) “块级格式化上下文”

BFC

块级格式化上下文

独立的渲染区域，需要一定规则触发

是什么

触发条件

特性

特性利用

1. margin的重叠问题

上下两个盒子同时给margiin的时候，会发生重叠，重叠的时候取margin最大值

解决办法

• 给其中一个子元素添加一个父盒子，添加 overflow:hidden/scroll/auto; display:inline-block;float-left/right;等等 让他俩触发BFC

2. BFC的区域不与float浮动的盒子重叠，BFC特性实现两栏布局

给左边固定宽 添加浮动，给右边添加overflow:hidden，会实现两栏自适应

3. 解决margin-top高度塌陷问题

overflow:hidden