使用方法：清除浮子后

Question

为什么不使用：after 成功清除浮动内容，以便内容出现在新行上？

Fiddle

HTML ：

<div id="left-block"></div>
<div id="right-block"></div>
<div>Content</div>

CSS：

#left-block {float:left; border:1px solid red; width:200px; height:200px;}
#right-block {float:left; border:1px solid green; width:200px; height:200px;}
#right-block:after {clear:both; content:""; display:block;}

截图：

Answer 1

只需给予＆＃34;清除＆＃34;为了你的内容。 LINK

<强> CSS

 .content {
    clear:both;
}

<强> HTML：

<div class="content">Content</div>

Answer 2

按如下方式更改您的HTML：

<div id="clearfix">
    <div id="left-block"></div>
    <div id="right-block"></div>
</div>
<div>Content</div>

你的css为：

#left-block {
    float:left;
    border:1px solid red;
    width:200px;
    height:200px;
}
#right-block {
    float:left;
    border:1px solid green;
    width:200px;
    height:200px;
}
#clearfix:after {
    clear:both;
    content:"";
    display: table;
}

基本上你需要给浮动的div一个父级，并给:after伪类显示table。
这是因为您需要清除浮动div的父级而不是子级本身

DEMO

Answer 3

将你的div包含在一个clear的类中，在浮动的div练习之后有clear:both但是它在页面中引入了我们真正不需要的元素如果有的话更好的方法。尝试在父元素上涉及CSS伪元素！

<强> HTML

<div class="clear">
   <div id="left-block"></div> 
   <div id="right-block"></div>
</div>
<div>Content</div>

<强> CSS

#left-block {float:left; border:1px solid red; width:200px; height:200px;}
#right-block {float:left; border:1px solid green; width:200px; height:200px;}
.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

Fiddle

Answer 4

使用Anubhav提出的相同html，我建议只需在“clearfix”框中添加“overflow：hidden”，而无需生成内容！ ： - ）

#clearfix
{
   overflow:hidden
}