CSS中float属性致布局异常的原因及纯float解决方案（新手向）

一、现象成因解释 #

给CSS新手先讲两个核心基础：

• 正常文档流：块级元素默认会占满父容器宽度，从上到下依次排列，每个元素都占据自己的“专属空间”。
• float的特性：设置float的元素会脱离正常文档流（相当于从原排列队伍里“跳出来”），但不会脱离文本流（文字会自动绕开这个浮动元素）。

回到你的代码场景：

• .box1设float:left后，它会脱离正常流，靠到容器左侧，同时让出了它在正常流里的位置。
• .box2是默认块级元素（float:none），会按正常文档流从容器顶部开始布局，占满整个容器宽度——所以它的盒子会覆盖在.box1后方。
• 但因为float元素会让文本绕开，.box2的文本会自动避开.box1的区域，看起来就像文本留在原位置，盒子跑到了后面。

二、纯Float属性解决方案 #

只需要修改.box2的float属性，有两种实用方案：

方案1：给.box2设置float:left #

让.box2也变成浮动元素，和.box1一起靠左排列（容器宽度足够时会在同一行），盒子和文本都会正常排列，不会重叠。

修改后的.box2 CSS：

.box2{
    background-color: rgb(248, 11, 177);
    border: 3px solid black;
    height: 25vh;
    font-size: 3vh;
    width: 20vw;
    float: left; /* 新增左浮动 */
}

方案2：给.box2设置float:right #

让.box2靠容器右侧浮动，和.box1分别在左右两侧，互不干扰。

修改后的.box2 CSS：

.box2{
    background-color: rgb(248, 11, 177);
    border: 3px solid black;
    height: 25vh;
    font-size: 3vh;
    width: 20vw;
    float: right; /* 启用右浮动 */
}

完整代码示例（以方案1为例） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float布局修复</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            background-color: aqua;
            height: 70vh;
            width: 80vw;
            text-align: center;
            
        }
        .box1{
            background-color: red;
            border: 3px solid black;
            height: 25vh;
            width: 20vw;
            font-size: 3vh;
            float: left;
        }
        .box2{
            background-color: rgb(248, 11, 177);
            border: 3px solid black;
            height: 25vh;
            font-size: 3vh;
            width: 20vw;
            float: left; /* 设置左浮动 */
        }
        .box3{
            background-color: rgb(7, 206, 67);
            border: 3px solid black;
            height: 25vh;
            width: 20vw;
            font-size: 3vh;
            float: right;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio sapiente pariatur quidem laudantium</div>
        <div class="box2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, sed! Cumque saepe dolore.</div>
        <div class="box3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In optio est accusamus?
        </div>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Raunak Raj