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%;
   }
   

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

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