修復浮動元素前後的僞元素如何？

-1

我有一個div，其中包含一些縮略圖，幷包含使用浮動的幾個圖像。但使用浮動背景圖像/顏色會縮小，因爲圖像浮動，所以沒有內容的背景圖像/顏色，除非我修復背景圖像/顏色的長度和寬度。修復浮動元素前後的僞元素如何？

然後我在網上發現，通過使用這段代碼我的問題解決了。

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

.cf:after { 
    clear:both; 
}

我知道該怎麼做明確的：這兩部作品，但我不知道做了content: " "; display: table;是如何解決這個問題。我有點猜到了，但有人可以簡單地向我解釋一下嗎？

在此先感謝。

我添加了兩張圖片，以防我的糟糕解釋難以理解。

enter image description here

編輯。感謝人們。不知道這叫做clearfix，難怪我一直在輸入：after：在Pseudo-elements for float或類似之前，我找不到我需要的東西。但我不認爲這個問題很複雜，因爲我想問的是clearfix如何工作，而不是clearfix vs float。

感謝PRASHANT用於鏈路〜

2014-09-03 WXR

的真正原因後面添加content: " "; display: table;到僞元素（：前，：後）是--->

:before僞元素創建一個匿名錶 - 單元格和一個新的塊格式化上下文。雖然這不是必需的，但是這可以防止頂邊距崩潰。需要使用table而不是block來包含子元素的頂部邊距。

:after僞元素用於清除浮體（clear: both;）

2014-09-03 09:19:53 Prashant

回答