时间戳

首页 > 解决方案 > Why is CSS clear property not clearing floats?

html - Why is CSS clear property not clearing floats?

问题描述

I have some very simple HTML and 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;
}

Why is the element with the class clear not displaying underneath the floated image?

标签： htmlcsscss-float

解决方案

clear only applies to block-level elements.

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>

推荐阅读