Explain the meaning of the clear property both, left, and right values in CSS

A few days ago a friend in the group asked Clear:left meaning, I thought is simple to clear the floating problem, let him Baidu "clear floating", leading to a little misunderstanding in the middle. Later I followed his demo and found that I did not fully understand the meaning of clear:left and clear:right. Special Read the following manual, and wrote a few demos, after the group of other people to guide, summarized as follows, I hope to other people can be a little help.

Clear has a value of four

1. None: Allow floating objects on both sides;
2. Both: Floating objects are not allowed;
3. Left: No floating object is allowed
4. Right: No floating objects are allowed on the left.

Frankly speaking, I don't really understand the literal meaning, because these paragraphs are ambiguous, for example, Clear:right's explanation is "do not allow floating objects on the right side", I always thought is to clear the bottom of their own (lower) container floating. But not really. The following one of the demo, I hope you can understand left and right is exactly where to clear the float.

One, ordinary floating, no clear floating, outer container collapse: DEMO

Two, left floating, Clear:both clear floating: DEMO

Three, right floating, Clear:both clear floating: DEMO

Four, floating around, clear:both clear floating: DEMO

Five, left floating, clear left floating, left floating, not clear floating collapse: DEMO

Six, right floating, clear right floating, left floating, not clear floating collapse: DEMO

(Floating outer container adds a background color, if this element does not float, the background color will wrap him, the other is not wrapped)

A lot of people clear floating like in the floating container plus an empty div,div plus clear:both, that is combined second (because I added a wide, generally clear floating div is 0, so see), I personally do not like this. Focus on the five and six, clear what, it clears its front container corresponding to the float. For example, five red is left floating, then the yellow clear:left is to clear itself before the red left float, and not clear the back of the blue left floating. Six miles Red is the right float, then the yellow clear:right is clear its front red right float. As for the two, three or four in the Clear:both, left and right floating can be cleared.

Summary: Add clear container, can only clear the container before itself floating, and clear the floating direction corresponding.

< reference:http://ons.me/434.html>

Explain the meaning of the clear property both, left, and right values in CSS