Explain the usage of clear:left/right in CSS

I. Understanding of Clear:left/clear:right

When you think of clear:left, it will naturally be considered "clear left float", clear:right is clear right float.

Actually think now, such understanding and expression is not rigorous to consider.

Generally speaking, the expression of the Chinese circle now is:

Clear syntax:

Clear:none | Left | Right | Both

Take value:

None: Default value. Allow floating objects on both sides

Left: Floating objects are not allowed on the left-hand side

Right: Do not allow floating object

Both: Floating objects are not allowed

W3.org's official explanation is: "The edge of the element box cannot be adjacent to the floating element above."

I personally think the official explanation is a little better.

Whether I "clear the Left/right float" or the industry-circulated "do not allow floating objects on the left/right", it means that the elements of the set clear are what makes the floating element. That is how I let others how to ~ ~ We can understand carefully, the feeling ...

The official argument is that "the elements that set clear are not what they are." That's how I am, you can feel it again ...

Why is the official explanation better? Is it "do unto others others"? Ha, this explanation is good, easy to remember. The more popular reasons are:

Be sure to remember this sentence: "Float is the devil, it affects other neighboring elements, but clear is small white, it will only affect itself, will not affect other adjacent elements!"

But the official explanation seems to be a mouthful, devoid of spirituality. So, according to my own perceptual cognition, I did the following understanding:

Clear syntax:

Clear:none | Left | Right | Both

Take value:

None: Default value.

Left: anti-floating

Right: Starboard side anti-floating

Both: Both sides anti-floating

The originator of the anthropomorphic verb "anti" is the element that sets the clear attribute, which is both vivid and accurate.

Examples of genuine knowledge

You can ruthlessly click here: Clear:left/right effect Demo

For example, the Clear:left function shown above shows: the picture left floating, incarnation of the Devil, to affect the adjacent elements behind. The general element cannot escape the fate which is affected by the bondage. Unless you have clear skills. For example, here Clear:left the left side of the floating, that is, the left side of the float can not do me-I still have the same as shown below.

However, if the picture is right floating, then clear:left still escape the fate of the fall, you can see the height of the parent container collapse!

Simple Clear:left is like a tidal crab, one side hung up, side do not lift.

Therefore, considering the versatility, we use clear:both in the process of resisting floating. The intention is obvious: I do not have to care whether you float left or right, I am immune.

Therefore, we will have the following carved after the clear floating general CSS:

CSS code copy content to clipboard

. fix {*zoom:1;}

. fix:after {content: '; display:table; clear:both;}

Below again has the question, looks like we contact clear basically is the both value, seems left, the right value appearance is the chicken ribs, is useless. Is that really the case?

Second, the actual use of clear:left/right

The most practical and most common use of clear:left/right is to implement a vertical wrapping layout.

A simple topic, the layout shown in the following figure is implemented, what is your HTML structure?

Well, I suppose you would put "Avatar img" and "name" in the same parent container, and the parent container would float left, and then the right information element would float and follow (adaptive layout), right?

This is the mainstream practice in the industry, but there is no problem?

But have you ever thought about the question: "Why is it that almost all of this HTML structure is designed?"

In fact, according to my unprofessional understanding, Avatar, name, self description should be a peer relationship. From the semantic point of view, seemingly "Avatar, name" abruptly become a son and daughter is not right ~ ~

When we only know that the money will be more in the bank, we will only save and manage. Again, it's not that we don't want to try other structures to implement the layout, but we don't know the method. To tell the Clear:left/right, is to understand the poor, not enough attention!

How to "Avatar", "Name", "Self description" three brothers on an equal footing, at the same time to achieve the layout effect we want to do? With Clear:left, the half clear property works with the float property to achieve a "vertical wrapping layout."

What is "vertical wrapping layout"? The demo provided above has a hint:

Two images are actually floating right (float:right), in which case it is clear that the picture will be a row of rows. However, if the following picture sets the right anti-floating statement: Clear:right. Then, the next picture will fall down, forming a vertical layout, plus its own floating characteristics still exist, so, two pictures like a floating whole. This is the typical "vertical wrapping layout."

As a result, we have the following HTML and CSS, there is a new way of layout to meet the requirements of the problem!

CSS code copy content to clipboard

1. <div style= "WIDTH:500PX;FONT-SIZE:12PX;OVERFLOW:HIDDEN;_ZOOM:1;" >
2. <span style= "float:left;width:96px ..." > Avatar </span>
3. <strong style= "Float:left;clear:left ..." > name </strong>
4. <p style= "margin-left:106px ..." > I'm a handsome guy ......</p>
5. </div>

At this point, the three brothers finally equal!