四、HTML布局

4.1文档流

HTML文档流（Document Flow）是网页布局的基础，它决定了元素如何在页面上排列。文档流可以分为两大类：正常流（Normal Flow）和脱离正常流（OutOfFlow）。下面详细介绍这两大类以及它们的子分类：

正常流是文档流的默认布局方式，元素按照它们在HTML文档中的顺序排列。正常流可以分为以下子分类：

块级元素（Block-level elements）：
- 总是开始于新行，并且其宽度默认填满父元素的宽度（除非指定宽度）。
- 高度如果不设置是默认由子元素的高度决定的，但是这种情况是子元素是脱离正常流。
- 例子： <div>, <p>, <h1> 到 <h6>, <hr>, <ul>, <ol>, <li> 等。
内联元素（Inline elements）：
- 不会开始新行，而是在当前行上水平排列，其宽度根据内容自动调整。
- 例子： <span>, <a>, <strong>, <em>, <img> 等。
内联块级元素（Inline-block elements）：
- 表现类似于内联元素，但是可以设置宽度和高度。
- 例子：当display属性设置为inline-block时，如 \<div style=“display: inline-block;”>。

脱离正常流的元素不再遵循正常文档流的布局规则，它们的位置和尺寸可以通过其他CSS属性如float, position等来控制。脱离正常流的布局方式包括：

浮动元素（Floats）：
- 通过float属性（如float: left;或float: right;）使元素脱离文档流，并向左或向右浮动。
- 浮动元素仍然保留在文本流中，这意味着文本和其他内联元素可以环绕它们。
绝对定位元素（Absolutely positioned elements）：
- 使用position: absolute;或position: fixed;属性，元素的位置相对于其最近的已定位（非 static）祖先元素或- - 视口来定位。
- 绝对定位的元素完全脱离文档流，不占据空间，因此不会影响其他元素的布局。
相对定位元素（Relatively positioned elements）
- 使用position: relative;属性，元素相对于其正常位置进行偏移，但保持在文档流中。
- 相对定位的元素仍然占据原来的空间，影响其他元素的布局。
粘性定位元素（Sticky positioned elements）：
- 使用position: sticky;属性，元素在跨越特定阈值前表现得像相对定位，之后表现得像固定定位。
- 粘性定位结合了相对定位和固定定位的特点。
表格布局元素（Table elements）：
- 表元素（如\<table>, \<tr>, \<td>等）使用表格模型布局，它们在文档流中表现为块级元素，但内部使用表格布局规则。

float和clear属性是CSS中用于控制布局的重要工具，它们允许开发者创建多列布局和处理元素的浮动。以下是float和clear属性的工作原理：

清除浮动：
- clear属性用于阻止元素旁边的浮动，确保元素在浮动元素下面开始，而不是旁边。
可选值：
- clear属性可以设置为left、right、both或none：
- left：清除左侧的浮动。
- right：清除右侧的浮动。
- both：清除左右两侧的所有浮动。
- none：不清除任何浮动（默认值）。
防止高度塌陷：
- 在包含浮动元素的块级元素中使用clear，可以防止父元素的高度塌陷，确保父元素能够包含其浮动子元素。
创建新行：
- 应用了clear属性的元素会创建新的文本流行，即它下方不会有其他浮动元素。
结合使用：
- 通常在包含浮动元素的容器之后使用一个具有clear: both;的空元素或伪元素（例如::after），以确保容器高度正确。

在使用float做多栏布局时，因为布局的子元素div脱离了文档流，如果不给父元素div设置高度，根据块级元素的特点，脱离文档流的子元素不能支撑它的高度，它的高度变为零。

这个时候为了不让父元素高度坍塌有以下两个办法：

使用清除浮动的元素（Clearfix）：
- 这是一种传统方法，通过在父元素内部的最后一个浮动元素后添加一个具有clear: both;属性的元素来清除浮动。
使用overflow属性：
- 给父元素设置overflow属性为hidden或auto，这可以创建包含浮动元素的块级格式化上下文（BFC），防止高度塌陷。

说明： 在HTML4的时代还没有flex布局，那时的网站通常用float来做多栏布局。