BFC
CSS 的 BFC #
BFC与布局 #
2.x.1 BFC的定义与原理 2.x.2 BFC的创建条件 2.x.3 BFC的应用场景与作用 2.x.4 BFC与浮动、边距折叠
BFC 定义 #
- Block Formatting Context
- 是 Web 页面的可视 CSS 渲染的一部分，
- 决定了元素如何对其内容进行定位，
- 以及与其他元素的关系和相互作用。
BFC 特性 #
- 内部的 Box 会在垂直方向上一个接一个地放置。
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的左外边缘与包含块的左边缘相接触（对于从右到左的格式，右边缘相接触）。
- BFC 的区域不会与 float box 重叠。
- BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算 BFC 的高度时，浮动元素也参与计算。
如何创建 BFC #
- 根元素或其他包含它的元素
- 浮动元素（元素的 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
- overflow 值不为 visible 的块元素
BFC 应用场景 #
- 防止 margin 重叠
- 与浮动元素的交互
- 可以用来清除内部浮动（清除浮动的影响）
- 自适应两栏布局
盒模型和BFC #
是CSS中的两个基本但不同的概念，它们在页面布局和元素渲染中扮演着各自独特的角色。理解它们之间的关系和区别对于深入掌握CSS布局至关重要。 #
盒模型（Box Model） #
盒模型是CSS中的一个基础概念，描述了文档中元素生成的矩形盒子在页面布局中的行为。盒模型包括以下几个组成部分：
- 内容（Content）：元素的文本和图片等内容所在的区域。
- 内边距（Padding）：内容区域周围的空白区域。
- 边框（Border）：围绕内边距和内容的线框。
- 外边距（Margin）：盒子与其他盒子之间的空白区域。
盒模型的主要作用是定义如何计算元素的总宽度和高度，以及元素之间的空间关系。
BFC（Block Formatting Context） #
BFC是Web页面中的一个隔离的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC具有以下几个关键特性：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的左外边距与包含块的左边界相接触（对于从左到右的格式化，否则相反）。
- BFC的区域不会与float box重叠。
- BFC是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。
关系与区别 #
- 关系：BFC提供了一个环境，盒模型则定义了这个环境中元素的大小和空间。简而言之，BFC决定了盒模型如何在页面中布局。
- 区别：
- 概念范围：盒模型是关于单个元素如何计算大小和边距的，而BFC是关于布局区域和如何处理元素间的关系（如浮动、清除浮动、防止margin重叠）。
- 作用目的：盒模型主要解决元素如何展示（大小、边距），BFC解决的是元素如何相对于彼此布局，以及如何处理一些特殊情况（如浮动、边距重叠）。
理解这两个概念，对于掌握CSS布局和实现复杂页面布局至关重要。