BFC块格式化上下文 (Block Formatting Context)

Posted 2020-12-20 tangsujuan

BFC概念：浮动元素和绝对定位元素，非块级盒子的块级容器 ,以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

  补充概念：

1. 浮动元素：float
   脱离文档流，相对于父元素显示；
   后面的块级元素和内联元素相对浮动元素，边框和背景忽略浮动元素；
   【块级元素：独占一行+宽高+padding&margin+display:block；
       内联元素：相邻元素一行+宽高无效+左右padding&margin+display:inline】
   
2. 绝对定位元素：absolute
   与文档流无关，不占据空间，相对于祖先元素
   【相对定位和浮动的区别：】

• 非块级盒子的块级容器：

• ---

  BFC的布局规则是什么？

  1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。

  2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此

  4）BFC的区域不会与float box 重叠

  5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

  6）计算BFC的高度时，浮动元素也参与计算

           https://www.cnblogs.com/shihaiying/p/11616055.html