Skip to main content

清除浮动塌陷的方法

Doc

清除浮动 - 学习 Web 开发 | MDN (mozilla.org)

  • 事实上我们有很多方法可以清除浮动塌陷的问题
  • 方法一：给父元素设置固定高度
    • 扩展性不好（不推荐）
  • 方法二：在父元素最后增加一个空的块级子元素，并且让它设置 clear: both;
    • 会增加很多无意义的空标签，维护麻烦
    • 违反了结构与样式分离的原则（不推荐）
  • 方法三：给父元素添加一个伪元素 ::after 伪元素
    • 推荐;
    • 编写好后可以轻松实现清除浮动;
    • 纯 CSS 样式解决，结构与样式分离（推荐）
<!-- 浮动元素父元素添加 clear-fix 类名 -->
<div class="demo clear-fix">
  <!-- 浮动元素... -->
</div>
.clear-fix::after {
  content: ""; /* 伪元素必须有内容，否则不会显示 */
  display: block; /* 伪元素默认是行内元素，需要设置为块级元素 */
  clear: both; /* 清除浮动 */

  /* 以下两个属性是为了兼容 IE6/7 */
  height: 0;
  visibility: hidden;
}

.clear-fix {
  *zoom: 1; /* 触发 hasLayout(兼容 IE6/7) */
}
Loading Github Gist ...
Details