css浮动布局

作者：思念的回忆发布日期:2025-11-30 浏览:97

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个包含浮动元素的容器 */
        .container {
            border: 1px solid black;
            padding: 10px;
            overflow: auto; /* 清除浮动，确保容器高度包裹浮动元素 */
        }

        /* 左浮动的元素 */
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: 10px;
        }

        /* 右浮动的元素 */
        .float-right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin-left: 10px;
        }

        /* 非浮动的元素 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

<div class="container clearfix">
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
    <p>这是一个普通的段落文本，它会环绕在浮动元素的周围。</p>
</div>

</body>
</html>

解释说明：

.container：定义了一个容器，并使用 overflow: auto 来清除浮动，确保容器的高度能够正确包裹内部的浮动元素。
.float-left 和 .float-right：分别定义了左浮动和右浮动的元素，设置了宽度、高度和背景颜色以便于区分。
.clearfix::after：通过伪元素 ::after 创建一个空内容，并使用 clear: both 来清除浮动，确保浮动元素不会影响后续布局。
浮动效果：浮动元素会脱离正常的文档流，其他非浮动元素会根据浮动元素的位置进行环绕。

上一篇：css 灰色

下一篇：css clip