使用 :after 清除浮动元素答案

【问题标题】：Using :after to clear floating elements使用 :after 清除浮动元素
【发布时间】：2012-05-28 18:50:57
【问题描述】：

我有一个列表，而李有一个float:left;。 <ul> 后面的内容应该正确对齐。因此我可以构建以下内容：

http://jsfiddle.net/8unU8/

我想，我可以使用 :after 之类的伪选择器删除 <div class="clear">。

但是这个例子不起作用：

http://jsfiddle.net/EyNnk/

我是否总是需要创建一个单独的 div 来清除浮动元素？

【问题讨论】：

标签： html css

【解决方案1】：

这样写：

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

查看http://jsfiddle.net/EyNnk/1/

【讨论】：

这是怎么做的。但请注意我关于语义的回答中的要点。
只是一个小信息：::after 带有双冒号是定位伪元素的推荐方式。
每一个支持双冒号 (::) 语法的浏览器也只支持 (:) 语法，但 IE 8 只支持单冒号，所以目前建议只使用单冒号以获得最佳浏览器支持。 :: 是一种较新的缩进格式，用于区分伪内容和伪选择器。如果您不需要 IE 8 支持，请随意使用双冒号。 css-tricks.com/almanac/selectors/a/after-and-before
为什么要放这个："content: ''; display: block;" ?如果你想要一个内联包装器怎么办？

【解决方案2】：

不，你这样做还不够：

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

还有以下 CSS：

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

【讨论】：

【解决方案3】：

这也可以：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

将clearfix 类赋予父元素，例如您的ul 元素。

来源here 和here。

【讨论】：

显示：表格可以增加额外的间距；我用 display: block 代替

【解决方案4】：

文本“dasda”永远不会不在标签内，对吧？从语义上讲，要成为有效的 HTML，只需将 clear 类添加到其中：

http://jsfiddle.net/EyNnk/2/

【讨论】：

这根本不是语义。 1）如果他的孩子有浮动，我们总是清除父元素，例如根据你的回答，如果我想为 UL 提供背景，它不包括 LI，因为 UL 不清楚 & 2）我有一个问题，为什么你要明确在 P 之前在单独的 DIV 中上课。如果你只给 P 也可以

【解决方案5】：

使用

.wrapper:after {
    content : '\n';
}

很像 Roko 提供的解决方案。它允许使用 :after 和 :before psuedo 插入/更改内容。详情请查看 http://www.quirksmode.org/css/content.html

【讨论】：