Does someone have an example have how the clear attribute works in css?

Question

Hello,

Since I am not a designer, but have been given duties as one, I was curious to how the clear attribute works. It would be helpful if someone has an example?

Thanks

Answer 1

Let's say you have three elements. The first one is floated to the left and contains quite a lot of text. The second and third one are relatively short (the combined length of both is shorter than the first one). In normal scenario, they both will be shown along the floated one. However, if you set clear:left on the third , it'll be shown after the first one, not beside it.

Answer 2

It is similar to when you use images with align="left" and you want something later on the page to be under the image, instead of beside. You'd use <br clear=all />

This basically does the same thing for DIVs when using the float: attribute. It forces the layout to end the floating.

Answer 3

To understand clear, you must understand floating. An excellent resource for learning both is Floatutorial, which includes this section on clear. To summarize:

• clear: left : element is moved below the bottom outer edge of any earlier left-floating boxes - example

• clear: right : element is moved below the bottom outer edge of any earlier right-floating boxes - example

• clear: both : The element is moved below all floating boxes of earlier elements - example

Answer 4

I wish I had a good example... although I can try to explain it in simple terms.

clear: left; basically says "Put this element after all elements above it with the float: left; attribute"

clear: right; is the same thing but after float: right; elements.

clear: both; is the same thing but after both float: left; and float: right; elements.

Answer 5

Sometimes when you put an element such as a "div" under another floated element (using the "float" property), you want to disallow that floating element from doing so on one side or another of your cleared element.

<div style="float:right;">
 // some text
</div>


<div style="clear:both;">
 // some text
</div>

Of course you're better off putting the css into a separate file. As mentioned above this tutorial is good.

Answer 6

The clear property is used to control the element flow in an HTML page when using the float property. It can be specified to clear either the left side, right side, both or none.

• none - floating elements can be placed on both sides of the element
• left - floating elements can not be placed on the left side of the element
• right - floating elements can not be placed on the right side of the element
• both - floating elements can not be placed on the left and right side of the element

Answer 7

clearfix is a good tool to help you not have to deal with it.

Answer 8

This is the way it works ... when placing elements on the page, the browser will stack elements one on top of the other, vertical, top down. Let's now say if you want the elements to line up one after the other, horizontal, left to right (no stacking); you Float them. But if you want to Float the elements and keep one item on it's own line, stacked between the first and second set, use the .clear attribute. Each number below represents a html tag element (like a div or img)

Normal vertical element stacking; nofloat and no clear...

1
2
3
4
5

Horizontal element layout; float with no clear

1 2 3 4 5

Horizontal layout, with one vertical stack, then continue with horizontal layout; float has been placed on the third element

1 2 (float, no clear)
 3  (float, clear)
4 5 (florat, no clear)

Happy floating...