Geek asks and answers

How does swimming and cleaning from the same element work?

I used to train my CSS skills and I came across a tutorial in which I'm going bald. Here's the link: http://css.maxdesign.com.au/floatutorial/tutorial0304.htm I spent hours researching to answer this, but didn’t stumble upon everything that helped me.

The author of the textbook does not give any good details of what happens to the elements. I understand that floating lifts an element from the page and floats in a given direction (left / right). A cleanup resets the item being moved and puts it back into the page stream.

How do these items still move to the right if the right side has been cleared? I do not understand the logic of this. Any clarifications on this subject would be deeply appreciated and perhaps I could save some of my hair.

Edit: Here is the 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

+5
source share
3 answers

You misunderstand cleansing. clear: rightsimply means that the element should vertically clear all previously right elements in one context, in other words, it should fall below all other elements with the rule of law. Visualization:

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

All elements are moved to the right, but Cset to clear: right, so it falls below the previous elements that are in swimming.

+4

float: right; , ( , , ). HTML, , , .

clear , float . , . Clear: right , .

, float: , , . clear: right , , .

0

, ( ) . , , , , .

Here is an example with two sets of floating elements, one with cleanup and one with.

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

Hope this helps you :)

0
source

More articles:


All Articles