html float

作者：血舞悲鸣发布日期:2025-07-25 浏览:39

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置浮动元素 */
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        /* 清除浮动 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="clearfix">
        <div class="float-left">浮动的元素</div>
        <p>这是一个普通的段落，它会根据浮动元素的位置进行调整。</p>
    </div>

</body>
</html>

解释说明

浮动元素：通过 float: left; 样式将 .float-left 类的 div 元素向左浮动。浮动元素会尽可能地靠左对齐，并且其后的文本或其他内容会围绕着它排列。
清除浮动：.clearfix 类使用伪元素 ::after 来插入一个空的内容，并设置 clear: both;，以确保父容器能够正确包裹浮动的子元素，避免父容器高度塌陷的问题。
布局效果：浮动的 div 会占据左侧的空间，而后续的段落文本会环绕在它的右侧。

上一篇：html文字颜色代码

下一篇：html隐藏和显示