無法清除僞元素浮點數

我想清除浮點數的CSS僞元素，但它不起作用。我究竟做錯了什麼？ 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; 
}

來源

2014-03-05 Dimt

請問你在做什麼？瘋狂的猜測是將'clear：both;'或'clear：left'添加到'＃afterfloat'後面。 – HamZa

+1我也一樣。我的意思是用僞元素清除浮點數。沒有工作。 –

@HamZa我正在嘗試重複[All About Floats]中顯示的解決方案（http://css-tricks.com/all-about-floats/）。 – Dimt

:after中的元素並不意味着「該元素的結束標記之後」僞類，它將畢竟內放元素中的項目。所以你不能用它來清除干擾。嘗試使用 -

#afterfloat { 
    clear: both; 
}

來源

2014-03-05 10:38:46 Iqbal

那麼，關於[All About Floats]（http://css-tricks.com/all-about-floats/）的解決方案是什麼？ – Dimt

@Dimt似乎是這樣，不知道。所以我想你只需要[** DEMO **]（http://jsfiddle.net/Ruddy/LqKW9/8/）...？或者像Iqbal說的[** DEMO **]（http://jsfiddle.net/Ruddy/LqKW9/10/） – Ruddy

根據[所有關於浮動]（http://css-tricks.com/all-about-浮動/）和其他來源我應該能夠使用僞元素清除浮動沒有任何額外的標記或清除成功的元素。這是不是有效的陳述呢？ – Dimt

無法清除僞元素浮點數

回答

相關問題