HTML5+CSS3学习笔记前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）

在HTML5+CSS3中，实现页面布局的方法主要有以下六种：

1. 文档流布局（Normal Flow）
2. 浮动布局（Floats）
3. 绝对定位布局（Absolute Positioning）
4. 表格布局（Tables）
5. Flex布局（Flexbox）
6. Grid布局（Grid）

以下是每种布局方式的简单示例：

1. 文档流布局（Normal Flow）：

   这是默认的布局方式，元素按照它们在HTML中的顺序排列，块级元素从上到下，行内元素或内联元素从左到右。

<div>Block Element 1</div>
<div>Block Element 2</div>
<span>Inline Element 1</span>
<span>Inline Element 2</span>

2. 浮动布局（Floats）：

   使元素向左或向右浮动，使其旁边的内容环绕。

<div style="float: left;">Floated Element 1</div>
<div>Normal Content</div>

3. 绝对定位布局（Absolute Positioning）：

   使用position: absolute将元素从文档流中移除，然后使用top、right、bottom、left属性相对于最近的已定位祖先元素定位。

<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 10px;">Absolutely Positioned Element</div>
</div>

4. 表格布局（Tables）：

   使用<table>元素进行布局。虽然不推荐用于布局，因为表格不是用来布局的，但在表格数据展示方面仍然使用广泛。

<table>
    <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
    </tr>
</table>

5. Flex布局（Flexbox）：

   Flexbox布局提供了更灵活的方式来对子元素进行排列、对齐和分配空间。

<div style="display: flex;">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

6. Grid布局（Grid）：

   Grid布局是一个二维的基于网格的布局系统，可以实现更复杂的布局。

<div style="display: grid; grid-template-columns: 100px 100px;">
    <div>Grid Item 1</div>
    <div>Grid Item 2</div>
</div>

每种布局都有其优点和适用场景，开发者应该根据具体需求选择合适的布局方式。