【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

相关文章

在Ubuntu上部署SpringBoot应用的操作步骤

《在Ubuntu上部署SpringBoot应用的操作步骤》随着云计算和容器化技术的普及,Linux服务器已成为部署Web应用程序的主流平台之一,Java作为一种跨平台的编程语言,具有广泛的应用场景,本... 目录一、部署准备二、安装 Java 环境1. 安装 JDK2. 验证 Java 安装三、安装 mys

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

SpringBoot3集成swagger文档的使用方法

《SpringBoot3集成swagger文档的使用方法》本文介绍了Swagger的诞生背景、主要功能以及如何在SpringBoot3中集成Swagger文档,Swagger可以帮助自动生成API文档... 目录一、前言1. API 文档自动生成2. 交互式 API 测试3. API 设计和开发协作二、使用

java中VO PO DTO POJO BO DO对象的应用场景及使用方式

《java中VOPODTOPOJOBODO对象的应用场景及使用方式》文章介绍了Java开发中常用的几种对象类型及其应用场景,包括VO、PO、DTO、POJO、BO和DO等,并通过示例说明了它... 目录Java中VO PO DTO POJO BO DO对象的应用VO (View Object) - 视图对象

Ubuntu 怎么启用 Universe 和 Multiverse 软件源?

《Ubuntu怎么启用Universe和Multiverse软件源?》在Ubuntu中,软件源是用于获取和安装软件的服务器,通过设置和管理软件源,您可以确保系统能够从可靠的来源获取最新的软件... Ubuntu 是一款广受认可且声誉良好的开源操作系统,允许用户通过其庞大的软件包来定制和增强计算体验。这些软件

Ubuntu 24.04 LTS怎么关闭 Ubuntu Pro 更新提示弹窗?

《Ubuntu24.04LTS怎么关闭UbuntuPro更新提示弹窗?》Ubuntu每次开机都会弹窗提示安全更新,设置里最多只能取消自动下载,自动更新,但无法做到直接让自动更新的弹窗不出现,... 如果你正在使用 Ubuntu 24.04 LTS,可能会注意到——在使用「软件更新器」或运行 APT 命令时,

TP-LINK/水星和hasivo交换机怎么选? 三款网管交换机系统功能对比

《TP-LINK/水星和hasivo交换机怎么选?三款网管交换机系统功能对比》今天选了三款都是”8+1″的2.5G网管交换机,分别是TP-LINK水星和hasivo交换机,该怎么选呢?这些交换机功... TP-LINK、水星和hasivo这三台交换机都是”8+1″的2.5G网管交换机,我手里的China编程has

Python中异常类型ValueError使用方法与场景

《Python中异常类型ValueError使用方法与场景》:本文主要介绍Python中的ValueError异常类型,它在处理不合适的值时抛出,并提供如何有效使用ValueError的建议,文中... 目录前言什么是 ValueError?什么时候会用到 ValueError?场景 1: 转换数据类型场景