CSS浮动和块元素答案

【问题标题】：CSS floats and block elementsCSS浮动和块元素
【发布时间】：2010-10-03 16:58:01
【问题描述】：

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

img {
  float: left;
}

我想确保我的标题不以以下方式开始缩进：

h3 {
  clear: left;
}

除了一些有列表（或任何块元素）漂浮在它们之外（或不是视情况而定）的图像之外，这一切都很好。这样做的原因在 CSS 规范中实际上很清楚：块元素不流动。行/内联元素可以。

然而，这对于列表来说是一个真正的问题。有什么方法可以以相当通用和兼容的方式解决它吗？

【问题讨论】：

我想我可以想象你所说的问题，但是截图会很有帮助。

标签： html css layout cross-browser

【解决方案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。

用clearfix类标记浮动元素的每个父级。

【讨论】：

我对它的作用和原因感到有些困惑。还有它在 IE6/7 中是如何处理的？

【解决方案2】：

听起来问题出在清除浮动上。但正如评论所说，截图会很好。我个人通过设置溢出属性来清除我的浮动：http://www.quirksmode.org/css/clearing.html

【讨论】：