CSS浮动和块元素

Question

我有一个很烦人的CSS布局问题。我正在尝试在特定页面上浮动图片：

img {
  float: left;
}

我认为要确保我的标题不以缩进开始：

h3 {
  clear: left;
}

除了某些包含列表（或任何块级元素）的图像不能流过它们（或者情况相反），其他都正常工作。原因在于 CSS 规范明确指出：块级元素不会流动，而行内元素会。

然而，这对于列表来说是一个真正的问题。是否有一种通用且兼容的方法可以解决它？

- cletus

---

我认为我可以想象你所说的问题，但是一张截图仍然会非常有帮助。 - David Kolar

Answer 1

以下是我经常采取的方法，以确保浮动元素始终被清除：

1. Add the following to the 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%;
   }
   

   You can also find this code here.

2. Mark every parent of the element that's floated with class clearfix.

- fallen888

---

我有点困惑这个程序是做什么的，以及为什么要这样做。另外它在IE6/7中如何处理？ - cletus

Answer 2

看起来问题确实与清除浮动有关。但是，正如评论所说，提供一张屏幕截图会更好。我个人通过设置overflow属性来清除我的浮动：http://www.quirksmode.org/css/clearing.html

- Lee Theobald