布局定位BFC：从入门到精通

布局基础

理解布局是理解定位和 BFC 的基础。网页上的元素是如何排布的呢？它们的位置是如何决定的呢？要回答这些问题，我们必须首先了解布局的基础知识。

HTML 中的元素可以分为两大类：块级元素和行内元素。

块级元素独占一行，且可以设置宽度和高度。常见的块级元素包括段落、标题、列表、表格等。

行内元素与文本同在一行，不能设置宽度和高度。常见的行内元素包括链接、图片、按钮等。

块级元素和行内元素的布局规则截然不同。块级元素垂直排列，而行内元素水平排列。

当多个元素同时存在时，布局规则就会变得更加复杂。这时，我们需要引入 flex 布局和定位来帮助我们更好地控制元素的位置。

Flex 布局：主轴、交叉轴

flex 布局是一种强大的布局方式，它允许我们轻松创建具有复杂布局的页面。

flex 布局的精髓在于两个轴线：主轴和交叉轴。主轴决定元素在水平或垂直方向上的排列方式，而交叉轴决定元素在垂直或水平方向上的排列方式。

通过调整 flex 布局的属性，我们可以轻松控制元素在页面中的位置和大小。

定位：相对、绝对、固定、粘性

定位是另一个重要的 CSS 属性，它允许我们控制元素在页面中的确切位置。

定位的类型主要有四种：相对定位、绝对定位、固定定位和粘性定位。

相对定位：相对于元素本身的位置进行定位。相对于它的正常位置，它可以被移动。但是，如果移除相对定位的元素，其他元素不会改变，它们仍会按照正常的文档流继续排列。

绝对定位：相对于父元素的位置进行定位。定位后，元素脱离文档流，不会再占有原本在文档流中的空间。这使得我们可以将元素放在页面中的任何位置。

固定定位：相对于视口的位置进行定位。定位后，元素脱离文档流，并且始终保持在视口中固定的位置。即使滚动页面，元素也不会移动。

粘性定位：结合了相对定位和固定定位的特点。在元素到达某个指定位置时，它将从相对定位切换到固定定位。这使得我们可以创建出一些有趣的滚动效果。

BFC：块级格式化上下文

BFC（块级格式化上下文）是一个特殊的布局容器，它可以包含块级元素和行内元素。BFC 的作用是隔离内部元素与外部元素的干扰，从而创建出独立的布局环境。

BFC 的形成条件有很多种，比如浮动元素、绝对定位元素、flex 布局元素等。

当元素被包含在 BFC 中时，它将受到 BFC 的布局规则约束。这使得我们可以创建出更复杂、更灵活的布局。

小节

通过了解布局基础、flex 布局、定位和 BFC，我们已经掌握了布局和定位的基本知识。这些知识将帮助我们创建出更美观、更实用的网页。