How use clear:both?

Question

<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/

Why in this example still is float? How can i use clear:both?

possible duplicate of [What is the use of style="clear:both"?](http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth) — GolezTrol, May 11 '12 at 13:04

score 8 · Answer 1 · answered May 11 '12 at 12:11

8

The clear property is ignored if the element is no block element. Use style="display: block" on the span or use a div, which is a block element.

answered May 11 '12 at 12:11

Kijewski

25,517
12
101
143

`display: block` on a span? Why not use a `div` then? – GolezTrol May 11 '12 at 12:11
@GolezTrol: you're right. Using div would be better in this example. I updated my answer. I firstly wanted to tell OP why the clear attribute is ignored. – Kijewski May 11 '12 at 12:12

score 5 · Answer 2 · answered May 11 '12 at 12:10

5

Change the span to a div. It will work on block elements.

answered May 11 '12 at 12:10

GolezTrol

114,394
18
182
210

score 4 · Answer 3 · answered May 11 '12 at 12:12

4

Clear only works on elements with display type block. Add display: block; to make it work as intended.

answered May 11 '12 at 12:12

Exelian

5,749
1
30
49

score 3 · Answer 4 · answered May 11 '12 at 12:10

3

Use div instead of span, because span is inline element. You can write clear for block elements.

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

answered May 11 '12 at 12:10

Chuck Norris

15,207
15
92
123

score 3 · Accepted Answer · answered May 11 '12 at 12:17

3

can you please check this DEMO, it may be help you. use DIV instead of span.

answered May 11 '12 at 12:17

khurram

946
1
13
34

score 1 · Answer 6 · edited May 11 '12 at 12:13

1

 <div style="clear: both">&nbsp;</div>

instead of span because its inline element

edited May 11 '12 at 12:13

Kijewski

25,517
12
101
143

answered May 11 '12 at 12:12

Daljit

685
5
12

score 0 · Answer 7 · answered May 16 '13 at 12:34

0

The issue is that the span is not a block element. either make it block. by using "display:block" as style attribute

or you can use div instead of span

see these 2 links:

jsfiddle.net/bLsju/7/

jsfiddle.net/wmT9w/

you'll understand easily.

answered May 16 '13 at 12:34

Akarsh Satija

1,756
2
22
28

score 0 · Answer 8 · answered Sep 16 '16 at 03:34

0

Use a div. If you insist on a span do:

<span style="display:block;clear: both"></span>

answered Sep 16 '16 at 03:34

kofifus

17,260
17
99
173

score -1 · Answer 9 · edited May 23 '17 at 12:13

-1

clear:both makes the element drop below any floated elements that precede it in the document.

duplicate of : What is the use of style="clear:both"?

edited May 23 '17 at 12:13

Community

1
1

answered May 11 '12 at 12:12

Anil Purswani

1,857
6
35
63

How use clear:both?

9 Answers9