本文主要是介绍【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
什么是文档流
- 文档流是 html 元素的排列方式
- 文档流分为
- 标准文档流【格式化上下文】
- 它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间
- 元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行
- 所有元素默认都是普通流定位
- 绝对定位
- 在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
- 浮动 float
- 在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
- 标准文档流【格式化上下文】
什么是BFC
块格式化上下文(Block Formatting Context
,BFC
) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。描述页面上的块级盒子是如何摆放和布局的。
在 BFC 中,每个盒子都按照以下规则来放置:
- 在 BFC 内的盒子会从包含块的顶部开始垂直地一个接一个地排列,形成一个垂直的盒子堆叠。
- 盒子在垂直方向上的边距会发生重叠,但是与其它 BFC 中的盒子的边距不会重叠。
- BFC 的区域不会与浮动元素的盒子重叠,保证了浮动元素不会覆盖 BFC 中的内容。
- BFC 的区域不会与外部的容器发生相互影响,使得 BFC 内部的元素对外部布局不产生影响,同时也不受外部影响。
触发 BFC 的条件包括:
- 根元素或包含根元素的元素
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块(元素的 display 为 inline-block)【常用】
- 表格单元格(元素的 display 为 table-cell)
- 表格标题(元素的 display 为 table-caption)
- overflow 不为 visible 的块元素【常用】
- 弹性元素【元素的 display 为 flex inline-flex元素的直接子元素】
BFC 有什么应用场景
-
自适应两列布局
-
防止外边距重叠
-
父子元素的外边距重叠
-
给父元素触发 bfc
-
给父元素增加 border
-
给父元素添加 padding
-
-
清除浮动
-
解决令父元素高度坍塌问题
-
-
防止文字环绕
-
垂直居中
-
通过将容器设为 BFC,并设置其为 flex 或 grid 布局,可以实现内部元素的垂直居中。
-
这篇关于【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!