CODEWITHSUNDEEP
htmlcsscss-float
Codist
Codist

Reputation: 1208

How does floating and clearing on the same element work?

I was brushing up on my CSS skills earlier and I came across a tutorial that has me going bald. Here's the link: http://css.maxdesign.com.au/floatutorial/tutorial0304.htm I have spent hours researching for an answer to this but haven't came across anything that helped me.

The author of the tutorial does not give any good details to what is going on with elements. I understand that floating lifts an element off the page and floats it in the given direction (left / right). Clearing resets the floated element and places it back into the flow of the page.

How are those elements still floated to the right if the right side has been cleared? I don't understand the logic behind this. Any clarification on this would be deeply appreciated and maybe I can keep some of my hair.

Edit: Here is CSS code and a screenshot from the tutorial linked above...

.floatright {
    float: right;
    margin: 0 0 10px 10px;
    clear: right;
}

p { margin-top: 0; }

enter image description here

Upvotes: 5

Views: 610

Answers (3)

deceze
deceze

Reputation: 522042

You misunderstand clearing. clear: right simply means that the element should vertically clear all previously right-floated elements in the same context, in other words that it should drop below all other right-floated elements. Visualization:

|                          |
|            +-----++-----+|
|            |  A  ||  B  ||
|            |     ||     ||
|            +-----++-----+|
|                   +-----+|
|                   |  C  ||
|                   |     ||
|                   +-----+|
|                          |

All elements are floated right, but C is set to clear: right, so it drops below the previous floated elements.

Upvotes: 4

Kyle
Kyle

Reputation: 67194

When you float an element and clear a direction, you are basically (in simple terms) adding a pagebreak to the doc flow. If the cleared element is followed by another floated element, in the same direction, it will of course float right, but appear below the first floated element.

Here is an example with two sets of floated elements, one with clearing and one with.

http://jsfiddle.net/Kyle_Sevenoaks/detxc/

Hope it helps you out :)

Upvotes: 0

Andreas
Andreas

Reputation: 1781

float: right; means that the element should float to the right (aligned to the right in its parent container, with the non-floating content of the parent flowing around it). If several right-floating elements follow each other in HTML, then they will all be placed next to each other, until the parent container is full at which point there is a line break.

The clear property specifies whether or not floats are allowed to occur in an element. This is independent of whether the element is floating. Clear: right means no floating elements are allowed on the right side.

So float: right in the examples makes sure that the images float to the right, with the text flowing around them. clear: right makes sure that the images are placed below one another rather than in one line.

Upvotes: 0

Related Questions