css左浮动

/* CSS 左浮动示例 */

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

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

/* 定义另一个不浮动的元素 */
.normal {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin: 5px;
}

<!-- HTML 示例代码 -->
<div class="container">
    <div class="left-float"></div>
    <div class="normal"></div>
</div>

解释说明：

• .container 是一个包含两个子元素的容器，设置了 overflow: auto 来确保容器能够包裹住浮动的子元素。
• .left-float 是一个左浮动的元素，它会尽可能地向左移动，并且后续的非浮动元素会围绕着它排列。
• .normal 是一个普通的块级元素，不会浮动，它会根据浮动元素的位置进行布局。

通过这个示例，你可以看到左浮动的效果以及如何处理浮动元素对其他元素的影响。