BFC机制

什么是BFC

BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

https://juejin.cn/post/6950082193632788493看这篇就够了

BFC的特点：

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算（很重要的一个应用）

触发BFC的：

定位、浮动、overflow: hidden、display不为null的各种。星池科技

（1）position:absolute或fixed；（2）float:left/right;（3）overflow:hidden; 不为visible， 常用方式;（4）display:inline-block; table-cell,table-caption,flex,inline-flex.

 

bfc解决的问题：外边距合并(外边距塌陷问题)，检测浮动高度（高度塌陷问题，子盒子浮动会使父盒子不会被撑开），制作右侧自适应盒子（两栏布局）

利用BFC避免margin重叠。比如俩div挨着，margin都是100px，那么实际的上下间隙只有100px。 这时，就给分别外面包一层，加各自的bfc。

4. bfc布局规则特性：

（1）bfc中，盒子从顶端开始一个接一个排列。 （2）同属于一个 bfc 的相邻盒子的margin会合并。www.starpool.cn 解决办法：把上面的盒子外层加一个div并设置overflow:hidden；这时与下面盒子不属于一个bfc。