html - 当文本段落和图像 float 并对齐时，如何以全新的 'row' 开始文本？

Question

是的，我知道标题有点模糊，所以任何人有更好的想法请编辑。

但是我创建了一个 jsfiddle明确我想做什么。

我有一个最简单的混合文本和图像内容。我想要实现的是第二个文本和第二个图像应该转到一个完整的新行，就在图像 1(及其标题)底线时的行下方。

我试过“clearfix”(jsfiddle)但没有成功:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

显然，由于我的 css/html 技能处于初级水平，我遗漏了一些简单的东西。

Answer 1

我将发布一个答案来解决其他答案中发布的错误信息。

首先，您的 .clearfix 选择器没有选择您的 br，因为您使用 ” 而不是 ":

<br class=”clearfix” />

由于在 HTML 中属性值不需要包含在 " 中，如果它们不包含空格，您的标记等同于

<br class="”clearfix”" />

其次，br元素是void元素。他们不能有内容。 ::after 伪元素在元素内部(末尾)插入内容。所以在 void 元素上使用 ::after 是行不通的。

如果要使用此 clearfix，请使用非空元素，例如div.

那应该行得通。但是，clearfix 不打算像这样使用。 Clearfix 应用于包含 float 的包装器，以使其增长以包围 float 。

但在这种情况下，您只想清除一个 float ，所以只需使用clear即可。