html - CSS float 和 block 元素

Question

我有一个恼人的 CSS 布局问题。我正在尝试在特定页面上 float 图像:

img {
  float: left;
}

我想确保我的标题不以缩进开头:

h3 {
  clear: left;
}

除了某些图像有列表(或任何 block 元素)漂浮在它们旁边(或不是实际情况)外，一切正常。其原因实际上在 CSS 规范中很明确: block 元素不流动。行/内联元素。

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

Answer 1

为了确保始终清除 float ，我总是这样做:

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 .

2. 用 clearfix 类标记 float 元素的每个父级。