Question

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

img {
  float: left;
}

我认为确保我的标题不会缩进：

h3 {
  clear: left;
}

除了一些列表（或任何块元素）漂浮在它们之外的图像（或者不是这样）之外，一切正常。其原因实际上在CSS规范中是明确的：块元素不会流动。行/内联元素可以。

然而，这是列表的真正问题。有没有办法以相当通用和兼容的方式解决它？

Answer 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浮动的元素的每个父元素。

Answer 2

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

CSS浮动和块元素

2 个答案: