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

2024-02-27 22:28

本文主要是介绍【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 布局,可以实现内部元素的垂直居中。

这篇关于【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/753759

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Java 枚举的基本使用方法及实际使用场景

《Java枚举的基本使用方法及实际使用场景》枚举是Java中一种特殊的类,用于定义一组固定的常量,枚举类型提供了更好的类型安全性和可读性,适用于需要定义一组有限且固定的值的场景,本文给大家介绍Jav... 目录一、什么是枚举?二、枚举的基本使用方法定义枚举三、实际使用场景代替常量状态机四、更多用法1.实现接