css float

/* CSS Float 示例代码 */

/* 定义一个包含浮动元素的容器 */
.container {
    border: 1px solid #000;
    overflow: auto; /* 清除浮动的影响 */
    padding: 10px;
}

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

/* 定义另一个不浮动的元素 */
.non-float {
    background-color: lightgreen;
    margin: 10px;
}

<!-- HTML 示例代码 -->
<div class="container">
    <div class="float-left"></div>
    <div class="non-float">
        这是一个不浮动的元素，它会根据浮动元素的位置进行排列。
    </div>
</div>

解释说明：

• float: left;：使元素向左浮动，这意味着它将尽可能地向左移动，并且其他内容会围绕它排列。
• overflow: auto;：用于清除浮动的影响，确保容器的高度能够包裹住浮动的子元素。
• .container：定义了一个包含浮动元素的容器，设置了边框和内边距。
• .float-left：定义了一个浮动的元素，设置了宽度、高度、背景颜色和外边距。
• .non-float：定义了一个不浮动的元素，设置了背景颜色和外边距。

通过这些代码，你可以看到浮动元素如何影响页面布局。