html - 为什么 CSS 清除属性不清除 float ？

Question

我有一些非常简单的 HTML 和 CSS:https://jsfiddle.net/79gdnyt1/8/

HTML

<div>
  <img src="http://placehold.it/120x110">
  <span>This text will wrap around the image.</span>
  <span class="clear">This text isn't allowed to wrap around floated elements, and therefore will render underneath them.</span>
</div>

CSS

img {
  float: right;
}

.clear {
  clear: right;
}

为什么类为 clear 的元素没有显示在 float 图像下方？

Answer 1

clear 仅适用于 block 级元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Initial value none

Applies to block-level elements

Inherited no

Media visual

div {
  background: #888;
  padding: 15px;
}

img {
  float: right;
  margin: 0px 20px 20px 0px;
}

.clear {
  display: block;
  clear: right;
}

<div>
  <img src="http://placehold.it/120x110">
  <span>This text will wrap around the image.</span>
  <span class="clear">This text isn't allowed to wrap around floated elements, and therefore will render underneath them.</span>
</div>