css清除浮动

作者：不必假装在乎发布日期:2026-06-02 浏览:29

/* 示例代码：清除浮动 */

/* 方法1：使用clearfix类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2：直接在父元素上使用clear属性 */
.parent {
  clear: both;
}

/* 方法3：使用overflow属性 */
.parent {
  overflow: hidden; /* 或者 overflow: auto; */
}

/* 解释说明：
1. clearfix方法：通过伪元素（::after）创建一个块级格式化上下文，并使用clear属性清除浮动，适用于需要清除多个浮动子元素的情况。
2. 直接使用clear属性：在父元素上直接应用clear属性，可以清除浮动，但可能会导致布局问题，不推荐广泛使用。
3. 使用overflow属性：通过设置父元素的overflow属性为hidden或auto，可以触发BFC（块级格式化上下文），从而清除浮动。这种方法简单有效，但需要注意可能会影响内容溢出的显示。
*/

上一篇：css隐藏元素的方式

下一篇：css动画效果网站