为什么 CSS clear 属性不清除浮点数？

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

为什么带有 class clear 的元素没有显示在浮动图像下方？

Answer 1

在.clearclass

中使用display: block属性

Answer 2

clear 仅适用于块级元素。

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>

为什么 CSS clear 属性不清除浮点数？

Why is CSS clear property not clearing floats?

html

css

css-float

为什么 CSS clear 属性 不清除浮点数？

Why is CSS clear property not clearing floats?

html

css

css-float

为什么 CSS clear 属性不清除浮点数？