CSS浮动和块元素

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

img {
  float: left;
}

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

h3 {
  clear: left;
}

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

然而,这是列表的真正问题.有一种相当通用和兼容的方式吗？

这是我一直在做的事情,以确保浮动始终被清除:

将以下内容添加到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%;
}

您也可以在此处找到此代码.

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