当前位置:   article > 正文

【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景

【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景

什么是文档流

  1. 文档流是 html 元素的排列方式
  2. 文档流分为
    1. 标准文档流【格式化上下文】
      1. 它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间
      2. 元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行
      3. 所有元素默认都是普通流定位
    2. 绝对定位
      1. 在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
    3. 浮动 float
      1. 在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。

什么是BFC

块格式化上下文(Block Formatting ContextBFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。描述页面上的块级盒子是如何摆放和布局的。

在 BFC 中,每个盒子都按照以下规则来放置:

  1. 在 BFC 内的盒子会从包含块的顶部开始垂直地一个接一个地排列,形成一个垂直的盒子堆叠。
  2. 盒子在垂直方向上的边距会发生重叠,但是与其它 BFC 中的盒子的边距不会重叠。
  3. BFC 的区域不会与浮动元素的盒子重叠,保证了浮动元素不会覆盖 BFC 中的内容。
  4. BFC 的区域不会与外部的容器发生相互影响,使得 BFC 内部的元素对外部布局不产生影响,同时也不受外部影响。

触发 BFC 的条件包括:

  1. 根元素或包含根元素的元素
  2. 浮动元素(元素的 float 不是 none)
  3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
  4. 行内块(元素的 display 为 inline-block)【常用】
  5. 表格单元格(元素的 display 为 table-cell)
  6. 表格标题(元素的 display 为 table-caption)
  7. overflow 不为 visible 的块元素【常用】
  8. 弹性元素【元素的 display 为 flex inline-flex元素的直接子元素】

BFC 有什么应用场景

  1. 自适应两列布局

  2. 防止外边距重叠

  3. 父子元素的外边距重叠

    1. 给父元素触发 bfc

    2. 给父元素增加 border

    3. 给父元素添加 padding

  4. 清除浮动

    1. 解决令父元素高度坍塌问题

  5. 防止文字环绕

  6. 垂直居中

    1. 通过将容器设为 BFC,并设置其为 flex 或 grid 布局,可以实现内部元素的垂直居中。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/150824
推荐阅读
相关标签
  

闽ICP备14008679号