无法使用伪元素清除float

时间:2014-03-05 10:23:43

标签: html css

我正在尝试使用css伪元素清除float,但它不起作用。我究竟做错了什么?的 Fiddle

HTML:

<div id="container">
    <div id="inner1"></div>
</div>
<div id="afterfloat"></div>

CSS:

#container{
    float:left;
    background: grey;
    border: 1px solid black;
}

#inner1{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid black;
}

#container:after{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

#afterfloat{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
}

1 个答案:

答案 0 :(得分:3)

元素中的

:after伪类并不意味着“在该元素的结束标记之后”,它将放在元素中的所有内部项之后。因此,您无法使用它进行清晰修复。尝试使用 -

#afterfloat {
    clear: both;
}