BFC总结

目录

• 什么是BFC？
• 形成BFC的条件？
• BFC的特性
• BFC的应用
• 代码检验

什么是BFC？

BFC(Block formatting context)直译为"块级格式化上下文"

是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

作用： 形成独立渲染区域，内部元素渲染不会影响到外部。

形成BFC的条件？

1. 浮动元素，float 不是 none；

2. 定位元素，position（absolute，fixed）；

3. flex元素、inline-block元素、及其他，display 为其中之一的值 flex，inline-block，table-cell，table-caption;

4. 块级元素 overflow 不是 visible （hidden，auto，scroll）；

BFC的特性

1. BFC的区域不会与float元素的区域重叠（清浮动）
2. 计算BFC的高度时，float元素也参与计算（清浮动）
3. 垂直方向上，并排的BFC元素，margin不折叠
4. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC的应用

1. 清除浮动
2. margin不折叠
3. 防止文字环绕（本质也是清浮动）

代码检验

  


  
 
    
    
哈哈哈哈哈哈哈哈
 
  

https://juejin.cn/post/6950082193632788493