css - 如何使用:after to clear floats

Question

为什么 :after 的使用不能成功清除 float ，以便内容出现在新行上？

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

按如下方式更改您的 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;
}

基本上，您需要为 float div 提供父级，并为 :after 伪类提供 table 的显示。
这是因为您需要清除 float div 的父级而不是子级本身

DEMO