CSS浮動和塊元素

Question

我有一個惱人的CSS佈局問題。我試圖在特定網頁上漂浮圖片：

img { 
    float: left; 
} 

我想確保我的標題不啓動縮進：

h3 { 
    clear: left; 
} 

這一切工作正常，除了一些圖片是有列表（或任何塊元素）通過它們浮動（或不是大小寫）。原因實際上在CSS規範中很明顯：塊元素不會流動。線/內聯元素。

但是，這是一個真正的問題。有沒有辦法以一種相當通用和兼容的方式？

Answer 1

這就是我總是做，以確保浮子始終清零：

1. 添加以下的CSS：

   .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%; 
   } 
   

   你也可以找到這段代碼here。

2. 標記與類clearfix漂浮的元素的每個父代。

Answer 2

這聽起來像問題是清除浮游物。但正如評論所說，截圖會很好。我親自通過設置溢出屬性來清除我的浮動：http://www.quirksmode.org/css/clearing.html