css浮动属性float详解

作者：绝朢╭ァ发布日期:2026-04-03 浏览:26

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            border: 1px solid black;
            padding: 10px;
            overflow: auto; /* 清除浮动 */
        }
        .box {
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightblue;
        }
        .float-left {
            float: left;
        }
        .float-right {
            float: right;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box float-left">左浮动</div>
    <div class="box float-right">右浮动</div>
    <div class="box">不浮动</div>
</div>

<p>在上面的例子中，第一个盒子使用了左浮动（float: left），第二个盒子使用了右浮动（float: right），而第三个盒子没有使用浮动。</p>
<p>为了防止父容器的高度塌陷，我们给父容器添加了 overflow: auto 属性来清除浮动。</p>

</body>
</html>

上一篇：css的position

下一篇：css段落首行缩进2字符