float在css中的用法

作者：二分醒amor 发布日期:2025-06-01 浏览:21

/* 使用 float 属性可以让元素向左或向右浮动，通常用于布局或多列文本环绕图片等场景。 */

/* 示例 1: 图片浮动在左边，文字环绕 */
img {
    float: left;
    margin: 10px; /* 给图片添加一些外边距，避免文字紧贴图片 */
}

/* 示例 2: 创建两列布局 */
.left-column {
    float: left;
    width: 50%;
    background-color: lightblue;
}

.right-column {
    float: right;
    width: 50%;
    background-color: lightgreen;
}

/* 示例 3: 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 解释：
- `float: left` 或 `float: right` 让元素分别向左或向右浮动。
- 浮动的元素会脱离正常的文档流，因此父容器的高度可能会塌陷，使用 `clearfix` 可以解决这个问题。
- `clear: both` 用于清除浮动，防止后续元素被浮动元素影响。
*/

上一篇：css 颜色代码

下一篇：css文字大小