3 
<div class="one">aaaaaaaaaa </div>
<div class="one">bbbbbbbbbb </div>
<div class="one">ccccccccccc </div>
<span style="clear: both">
    THIS SHOULD BE BELOW TABLE. WHY NOT?

.one {
  background-color: red;
  float: left;
}

http://jsfiddle.net/bLsju/2/

为什么在这个例子中仍然是浮动的？我如何使用 clear:both？

4

9 回答 9

8

clear如果元素不是块元素，则忽略该属性。在 span 上使用 style="display: block"或使用 div，它是一个块元素。

于 2012-05-11T12:11:00.623 回答
5

将 更改span为div. 它适用于块元素。

于 2012-05-11T12:10:54.970 回答
4

Clear 仅适用于具有显示类型块的元素。添加display: block;以使其按预期工作。

于 2012-05-11T12:12:12.847 回答
3

你能检查一下这个DEMO吗，它可能对你有帮助。使用 DIV 而不是跨度。

于 2012-05-11T12:17:58.833 回答
3

使用 div 而不是 span，因为 span 是内联元素。您可以为块元素编写 clear 。

http://jsfiddle.net/bLsju/2/

于 2012-05-11T12:10:32.313 回答
1 
 <div style="clear: both">&nbsp;</div>

而不是 span 因为它的内联元素

于 2012-05-11T12:12:54.377 回答
0

问题是跨度不是块元素。要么让它阻塞。通过使用“display:block”作为样式属性

或者你可以使用 div 而不是 span

看到这两个链接：

jsfiddle.net/bLsju/7/

jsfiddle.net/wmT9w/

你会很容易理解的。

于 2013-05-16T12:34:06.047 回答
0

使用一个 div。如果您坚持跨度，请执行以下操作：

<span style="display:block;clear: both"></span>
于 2016-09-16T03:34:44.080 回答
-1

clear:both 使元素下降到文档中它之前的任何浮动元素之下。

重复：style="clear:both" 的用途是什么？

于 2012-05-11T12:12:42.817 回答