clearfix清除浮动相关解决方案|三体教程
文章目录

clearfix清除浮动相关解决方案

前面我们有写过一篇《clearfix清除浮动如何使用》的文章,但是仍然有许多小伙伴希望能有一些更加清晰的实例。

所以今天再来讨论一下clearfix清除浮动相关解决方案。

容器与 overflow: auto

清除浮动元素的最简单方法是使用overflow: auto,这个解决方案适用于现在的大部分主流浏览器。

<div style="overflow: auto;">
  <img style="float: right;" src="path/to/floated-element.png" width="500" height="500" />
  <p>这里是你的内容…</p>
</div>

但是它也有一个缺点,在外部元素上使用特定的边距和填充组合可能会导致滚动条出现,但是可以通过将边距和填充放置在另一个包含父元素的元素上来解决。

使用overflow:hidden也是一个clearfix解决方案,但是不会有滚动条,但是使用hidden会裁剪位于包含元素之外的任何内容。

注意:img在这个例子中,浮动元素是一个标签,但也可以是任何html元素。

重新加载Clearfix

通过放弃对老版IE的支持,解决方案可以简化为一个css语句。此外,使用display: block(而不是display: table)允许在具有clearfix的元素是兄弟元素时正确折叠页边距。

.container::after {
  content: "";
  display: block;
  clear: both;
}

较早的Clearfix解决方案

以下解决方案对于现在的主流浏览器不是必需的,但对于定位旧浏览器可能会有用。

请注意,这些解决方案依赖于浏览器错误,因此只有在上述解决方案均不适用于您的情况下才能使用。

当针对主流浏览器时,我们现在可以删除zoom和::before property / values,并简单地使用:

.container::after {
    content: "";
    display: table;
    clear: both;
}

此解决方案不支持IE6/7。

Micro Clearfix

Micro Clearfix是最新的全球采用的clearfix解决方案。

可以被以下浏览器支持:Firefox 3.5+,Safari 4+,Chrome,Opera 9+,IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Overflow属性

当定位内容不会显示在容器的边界之外时,这种方法在通常情况是首选。

设置width: 100%容器。

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

display其他属性可以用于触发元素的“hasLayout”,而不是使用该属性为IE设置“hasLayout” 。

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

清除使用该overflow属性浮动的另一种方法是使用以下划线“_”开头的值。

IE将应用以下划线为前缀的值,其他浏览器不会。

该zoom属性触发hasLayout的在IE中:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

显然这种方法不是很理想。

元素使用“clear”属性

快速而暴力的方法就是使用clear: both。

<br style="clear: both" />

这个是有很多缺点的。

缺点

  • 如果布局风格根据媒体查询而改变,则可能不会提供期望的效果,纯CSS的解决方案更为理想。
  • 它不会为您的标记添加任何语义值。
  • 使用这样的代码看起来不专业。
  • 在将来,当您需要使用另一个clearfix解决方案时,您不必回头再去去除<br>标记周围的所有标签。

本文网址:http://www.santii.com/article/196.html


数据更新时间:2018-07-22