Hi, I’m kinda new to actually understanding the reason behind float and I’ve a question after seeing this video:
Why do we need the (float) clear command, that is, clear: left\right\both ?
In other words, why deleting or commenting the float command itself won’t give the same effect ?
The clear property is not applied to the floated element, it is applied to an element that follows a float. Therefore it has no effect on the floated element, but can be used to make a subsequent element “clear” (or appear beneath) the floated element, rather than being next to it as is default behaviour.
Simply removing or commenting the float property will leave the element with its default behaviour, not floated to one side.
Actually the video the OP linked to is about adding clear to floated elements themselves 
‘Clear’ when applied to any block element (floated or not) indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box.
If the element is a float it will still clear the floats above it (in the same block formatting context ).
Removing float from the element will allow it to wrap around previous floats but adding clear will make it start below the floated element (e.g. move its top edge past the bottom edge of the float above.)
The specs go into more specific details
Thank you guys for your replies, its hard to describe in words how it helped me to understand the concept ! I know wrote the further summary in my own tongue:
Naturally, floated elements tend to drag elements that comes right after them in the document flow.
If we float 4 boxes to the left (1th = Red, 2th = Green, 3th = Blue, 4th = Yellow), we can clear the float of each second box (that is, 2th & 4th), so it won’t be dragged by its previous element.
If we’ll clear the float of the Green box, it won’t float in any direction of the Red box, as would occur naturally if we wouldn’t.
The exact same process can be repeated with the Yellow & Blue boxes, and thus 2/4 elements will be floated, instead 4/4 (2 by command, 2 by dragging).
While the “dragging” part seems intuitive with you, it’s not quite what is actually happening. There are two types of HTML elements: block and inline. Normal flow is that elements are rendered one above the other in the order they are in the code. When an element is floated, it is taken “out of the flow”. Surrounding inline content will “wrap” around the floated element, while block elements will be rendered below. The “dragging” part you noticed happens only if there are more floated elements one after another. Like bubbles, they “float” as much to the top as possible inside their current container. If there is enough space to the side, they will stand side by side. If not, they will be rendered below.
Clearing is actually used in two situations:
To “contain” the floats inside their parent. Because floated elements are taken out of the flow, they can “poke out” of their parent, if its non-floated content is not tall enough or if there is no other content but floats. There are various methods to do this - for further reference you can check this article http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
To force a floated element on the next line. Let’s imagine a common scenario: you have a gallery of pictures and you need to display them in rows. Easiest solution is to float them to the left, add some margins to make some space around each image and done. They will fill all available space before moving to the next line. But if you want to have only 4 images in a row, you will add clear: left to every fifth element. Basically clear makes a barrier that no floated element can cross.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.