css clear

作者：昨夜的风发布日期:2026-04-26 浏览:115

/* 使用 clear 属性来清除浮动 */

/* 示例 1: 清除左侧浮动 */
.clear-left {
    clear: left;
}

/* 示例 2: 清除右侧浮动 */
.clear-right {
    clear: right;
}

/* 示例 3: 清除两侧浮动 */
.clear-both {
    clear: both;
}

/* 示例 4: 使用伪元素清除浮动 */
.parent-element::after {
    content: "";
    display: table;
    clear: both;
}

解释说明

clear 属性用于指定元素的哪一侧不允许浮动元素。它可以防止浮动元素影响其后的元素布局。
clear: left;：清除左侧浮动，即该元素的左侧不允许有浮动元素。
clear: right;：清除右侧浮动，即该元素的右侧不允许有浮动元素。
clear: both;：清除两侧浮动，即该元素的左右两侧都不允许有浮动元素。
使用伪元素（如 .parent-element::after）是一种常见的清除浮动方法，特别是在父元素中包含多个浮动子元素时。通过在父元素后添加一个清除浮动的伪元素，可以确保父元素的高度能够正确包裹浮动子元素。

上一篇：css换行符

下一篇：css div垂直居中