Html 使用 :after 清除浮动元素

Using :after to clear floating elements

提问by Torben

I have a list and the li's have a float:left;. The contents after the <ul>should be aligned correctly. Therefore i can build the following:

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

http://jsfiddle.net/8unU8/

http://jsfiddle.net/8unU8/

I thought, that I can remove the <div class="clear">by using pseudo selectors like :after.

我想，我可以<div class="clear">通过使用像 :after 这样的伪选择器来删除。

But the example is not working:

但是这个例子不起作用：

http://jsfiddle.net/EyNnk/

http://jsfiddle.net/EyNnk/

Do I always have to create a separate div to clear floating elements?

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

回答by sandeep

Write like this:

像这样写：

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

Check this http://jsfiddle.net/EyNnk/1/

检查这个http://jsfiddle.net/EyNnk/1/

回答by kernelpanic

No, you don't it's enough to do something like this:

不，你做这样的事情还不够：

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

And the following CSS:

以及以下 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%;
}

回答by Mahdi

This will work as well:

这也将起作用：

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

.clearfix:after {
    clear: both;
}

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

Give the class clearfixto the parentelement, for example your ulelement.

将类clearfix分配给父元素，例如您的ul元素。

Sources hereand here.

来源在这里和这里。

回答by sachin kumar

Use

用

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

Much like solution provided by Roko. It allows to insert/change content using : after and :before psuedo. For details check http://www.quirksmode.org/css/content.html

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

回答by Alex

The text 'dasda' will never not be within a tag, right? Semantically and to be valid HTML it as to be, just add the clear class to that:

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

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

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