第六篇、浮动（已过时）CSS浮动（float）早期用于文字环绕与多列布局，是Flex/Grid前的主流方案。它半脱离文档

核心概念

浮动（float） 是 CSS 早期实现多列布局的核心属性，设计初衷是实现「文字环绕图片」的排版效果，Flex/Grid 布局普及前曾是网页整体布局的主流方案。

核心特性

半脱离文档流：
1. 脱离横向文档流：不再遵循块级独占一行、行内从左到右的横向排列规则，可向父元素左 / 右侧浮动，贴靠相邻浮动元素；
2. 未脱离文字流：文档流中的文字 / 行内元素会感知到浮动元素，自动环绕其排列；
3. 完全脱离物理空间：不再占据父容器垂直空间，导致父容器「高度塌陷」（父容器高度为 0）。
文字环绕：浮动元素不会遮挡文字，文字会自动绕开浮动元素排布，这是其最初设计目的；
多列布局：早期通过浮动实现左右分栏布局，是 Flex/Grid 出现前的主流多列方案。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准文档流与浮动（现代标准版）</title>
    <style>
        /* 1. 文字环绕图片示例 */
        .float-img {
            float: left;
            width: 150px;
            margin-right: 15px;
            margin-bottom: 10px;
        }
        .content p {
            margin: 0 0 10px 0;
        }

        /* 2. 两列浮动布局示例 */
        .layout-container {
            margin: 20px 0;
        }
        .float-left-box {
            float: left;
            width: 70%;
            box-sizing: border-box;
            padding: 10px;
        }
        .float-right-box {
            float: right;
            width: 30%;
            box-sizing: border-box;
            padding: 10px;
            text-align: right;
        }
        /* 清除两列布局浮动（现代写法） */
        .layout-container::after {
            content: "";
            display: table;
            clear: both;
        }

        /* 3. 高度塌陷相关样式 */
        .parent-box {
            border: 2px solid #9c3f3f;
            padding: 10px;
            margin: 20px 0;
            clear: both;
        }
        .float-child {
            float: left;
            width: 100px;
            height: 100px;
            background: #667eea;
            margin: 0 10px 10px 0;
        }
        .parent-box p {
            margin: 0 0 10px 0;
            clear: both;
        }

        /* 解决方案1：伪元素清除法（现代首选） */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /* 解决方案2：BFC清除法（现代写法） */
        .bfc-clear {
            display: flow-root; /* 替代overflow:hidden，无溢出副作用 */
        }

        /* 解决方案3：额外标签法 */
        .clear-tag {
            clear: both;
            height: 0;
        }
    </style>
</head>
<body>
    <!-- 标准文档流定义 -->
    <div class="doc-flow-desc">
        <p>标准文档流是浏览器默认的元素布局规则，核心遵循“从上到下、从左到右”的排列逻辑：块级元素默认垂直独占一行，行内元素默认水平同行，行内块元素完全遵循文档流、兼具行内与块级特性。仅普通文档流中的块级元素会触发垂直外边距折叠，行内元素、行内块元素无此特性。完全脱离文档流：浮动（float: left/right）、绝对定位（position: absolute）、固定定位（position: fixed），元素不再占据原布局空间，不参与外边距折叠。不脱离文档流：相对定位（position: relative）仅在原位置偏移，保留自身文档流空间，不影响其他元素布局。部分脱离/动态脱离：粘性定位（position: sticky）未触发粘滞时遵循文档流，触发后仅视觉上“粘住”，仍保留原文档流空间。专属布局上下文：Flex/Grid容器的子元素脱离普通文档流，遵循其专属布局规则，不参与外边距折叠。</p>
    </div>

    <!-- 示例1：文字环绕图片 -->
    <div class="content">
        <img src="https://picsum.photos/150/100" class="float-img" alt="示例图片">
        <p>这是一段环绕图片的文本内容，浮动的核心效果就是让文字能够围绕浮动元素排列。这是一段环绕图片的文本内容，浮动的核心效果就是让文字能够围绕浮动元素排列。</p>
        <p>这是第二段文本，会继续沿着图片的右侧排列，直到图片结束后，文本恢复正常的全屏宽度。</p>
    </div>

    <!-- 示例2：两列浮动布局 -->
    <div class="layout-container">
        <div class="float-left-box">左列内容（70%宽度）</div>
        <div class="float-right-box">右列内容（30%宽度）</div>
    </div>

    <!-- 示例3：高度塌陷 -->
    <div class="parent-box">
        <p>高度塌陷：父容器高度为0，仅显示边框线</p>
        <div class="float-child"></div>
        <div class="float-child"></div>
    </div>

    <!-- 解决方案1：伪元素清除法 -->
    <div class="parent-box clearfix">
        <p>解决方案1：伪元素清除法（首选）</p>
        <div class="float-child"></div>
        <div class="float-child"></div>
    </div>

    <!-- 解决方案2：BFC清除法（现代版） -->
    <div class="parent-box bfc-clear">
        <p>解决方案2：BFC清除法（display: flow-root）</p>
        <div class="float-child"></div>
        <div class="float-child"></div>
    </div>

    <!-- 解决方案3：额外标签法 -->
    <div class="parent-box">
        <p>解决方案3：额外标签法（不推荐）</p>
        <div class="float-child"></div>
        <div class="float-child"></div>
        <div class="clear-tag"></div>
    </div>
</body>
</html>