BFC
常见定位方案
定位方案是控制元素的布局,有三种常见方案:
- 普通流 (normal flow)
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。 - 浮动 (float)
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。 - 绝对定位 (absolute positioning)
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
BOX
css布局的基本单位
元素的类型和 display 属性,决定了这个元素的BOX的类型分为:
- [block-level box]
display属性值为:block、list-item、table 的元素会生成 block-levle box,并且参与 block formatting context 布局 - [inline-level box]
display属性值为:inline、inline-block、inline-table 的元素会生成 inline-level box,并参与 inline formatting context 布局 - [run-in box]
run-in box
是一个块/行内元素混合,可以使某些元素成为下一个元素的行内部分
在 css 中,只需要改变元素的 display 值,并让下一个元素作为块级元素框,就可以使元素成为 run-in元素
目前很少有浏览器支持 run-in 元素
行为如下:
- 如果 run-in 框包含一个块框,那 run-in 框变为块框
- 如果run-in框的后继兄弟元素为块框(非浮动,非绝对定位),那么run-in框变为该块框的第一个行内框。
- run-in不能插入本身为run-in的块中,也不能插入块中已有run-in的块中。否则,run-in框变为块框。
FC
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
常见的 FC 如下:
- Block formatting context (BFC)
- Inline formatting context (IFC)
- Grid formatting context (GFC)
- Flex formatting context (FFC)
BC
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文:
- 根元素或包含根元素的元素
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块元素(元素的 display 为 inline-block)
- 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 strict 的元素
- 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
- 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
- column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
块格式化上下文包含创建它的元素内部的所有内容.
BFC特性及应用
- 同一个 BFC 下外边距会发生折叠
如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器
<div style="height: 100px;width: 100px;margin: 50px;background: lightblue">第一个元素</div>
<div style="width: 100px; height: 100px;margin: 50px;background: #eee">第二个元素</div>
2. BFC 可以包含浮动的元素(清除浮动)
浮动元素会脱离普通文档流,如果使触发容器的 BFC,那么容器将包裹着浮动元素
3. BFC 可以阻止元素被浮动元素覆盖
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素</div>
文本信息不会被浮动元素所覆盖
若有错误,请大佬们指点,谢谢~