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