使用方法：清除浮動元素後

我有一個列表和李的float:left;。 <ul>後面的內容應該正確對齊。因此，我可以建立如下：使用方法：清除浮動元素後

http://jsfiddle.net/8unU8/

我想，我可以通過使用僞選擇像刪除<div class="clear">：後。

但這個例子不工作：

http://jsfiddle.net/EyNnk/

難道我總是要創建一個單獨的div來清除浮動元素？

來源

2012-05-22 Torben

231

這樣寫：

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

入住這http://jsfiddle.net/EyNnk/1/

來源

2012-05-22 09:33:29 sandeep

這是怎麼做到的。但請注意我關於語義的答案中的一點。 – Alex

只是一個小信息：使用雙冒號的':: after'是針對僞元素的推薦方式。 – Dennis98

支持雙冒號（：:)的每個瀏覽器CSS3語法也僅支持（:)語法，但IE 8僅支持單冒號，因此目前建議僅使用單冒號以獲得最佳瀏覽器支持。 ::是較新的格式，用於區分僞內容和僞選擇器。如果您不需要IE 8支持，請隨意使用雙冒號。 https://css-tricks.com/almanac/selectors/a/after-and-before/ – retroriff

文本 'dasda' 永遠不會是一個標籤內，對不對？從語義和有效的HTML爲要，只需添加明確的階級到：

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

來源

2012-05-22 09:35:16 Alex

它根本不是語義。 1）如果我的孩子有漂浮在其上的例子，如果我想給背景加入UL，那麼我們總是清楚父元素，因爲UL不清晰，所以它不覆蓋LI's 2）我有個問題爲什麼你給了清楚在P之前的一個單獨的DIV中的類。如果你給P只有它也可以工作 – sandeep

不，你不這足以做這樣的事情：

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

而且下面的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%; 
}

來源

2012-05-22 09:36:07 kernelpanic

使用

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

非常類似於Roko提供的解決方案。它允許插入/更改內容：after和：before psuedo。查詢詳情 http://www.quirksmode.org/css/content.html

來源

2012-05-22 09:49:24

這也能發揮作用：

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

.clearfix:after { 
    clear: both; 
} 

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

給類clearfix到父元素，例如您的ul元素。

來源here和here。

來源

2014-01-20 07:27:52 Mahdi

顯示：表可以增加額外的間距;我使用display：block代替 –

使用方法：清除浮動元素後

回答

相關問題