How to clear floating collapse in css

This article mainly introduces the method of clearing floating collapse in CSS. It has certain reference value. Now I share it with you. Friends in need can refer to it.

In the process of using CSS , you will more or less encounter the problem of clearing floats. Therefore, this article summarizes 4 methods for clearing floating collapse in p css. I believe it will be helpful for everyone to learn or use p css. Friends in need can take a look below.

What is floating?
The definition says: A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. In fact, it means changing the fast-level elements into being able to line up with other fast-level elements.

Floating elements have 4 characteristics:
1. Floating elements will break away from the standard document flow and no longer distinguish between blocks and lines.

2. Floating elements will stick to each other.

3. Floating elements have the effect of "word width".

4. Shrink. A floating element, if width is not set, will automatically shrink to the width of the text.

Similarly on the road of front-end Siege Lion, we are sincerely trying our best to learn and make progress. However, first of all, the wars between major browser manufacturers continued, which made those of us who are studying miserable and miserable. I have to think of various hack methods to solve it. (Yes, this is IE6 that is being complained about!)

Secondly, the document standard flow will also dig a big pit after floating. If a beginner is not careful, the collapsed and out-of-control sub-elements will run around everywhere, making you miserable. So in order to go further and further on the front-end road, let me explain to you four methods to clear floating.

But when we talk about the routine, we also reproduce the big pit that collapsed after the float.

Floating Collapse Pit:
Let’s take a look at a small demo: now there are two p, and p does not have any attributes. There is a li in each p, and these li are floating. First, the html skeleton part

The following is the css style:

Seeing this, if you have never suffered a big loss from floating collapse, you will definitely think that the effect on this webpage is like this

But in fact the browser The final rendering looks like:

The li in the second p is pasted to the edge of the last li in the first p.

The reason is that p has no height and cannot give its own floating children a container.

So the li in the second p is pasted to the edge of the last li in the first p!

This phenomenon is also called floating collapse phenomenon!

After talking about floating collapse, let me return to the topic of today. 4 ways to clear float collapse

Method 1: Add height to the parent of the floated element

If an element is to be floated, then it The ancestor element must have a height. The height of the box can be used to close the float.

As long as it is floated in a box with a height, this float will not affect the subsequent floated elements. So it’s about clearing the impact of floating.

So you only need to set a height: 40px for the superior ul or p of li; (as long as it is the superior element of the floating element.), then the second p can be squeezed down and placed in the first box shown below.

Method 2: clear:both;
But in the actual development process, height rarely appears. Why? Because it can be boosted by content! That is to say, the method 1 we just explained is rarely used in work.

So someone here may have a big idea: Can you clear the float without writing height? Also let the floats not affect each other?

In fact, there is such a solution, which is to add a clear: both to his superior; first of all, Clear means clear, and both means that both left and right floats are cleared. In layman's terms, it means eliminating the influence of others on me.

Although this can eliminate the floating collapse phenomenon, it also has a fatal problem. That is, between two p's, the margin value is invalid and cannot be set. To reiterate, it refers to between two p's.

Method 3: Partition Wall Method
Since using clear: both will cause the margin between the two ps to fail, then someone will start to have a lot of imagination later. . Put an empty box in the middle, and then give that empty box clear: both; (To make it easier for everyone to see the effect, there is no empty box here, but a box with height and color.)

After adding a wall like this, the second p can fall down without interfering with the elements above. Moreover, the second p can still adjust the distance between the two p (the "wall" p is not included) through magin-top, so the partition method spreads as a new routine.

Method 4: Evolved version of the partition method-inner wall method
There is a kind of person in this world - perfectionist, in their Flaws in the worldview are absolutely not allowed. Then in the front-end industry, there are also a group of front-end siege lions who pursue perfectionism. They were completely unacceptable for the small flaws of the partition method, so this group of perfectionist front-end siege lions began to evolve the perfect transformation of his partition method.

So the "inner wall method" was born. Let's take a look at the code structure first:

Just change the position of the wall, and it's perfect Solve the problem that the first p cannot adjust the distance from the following p through margin-bottm.

So for a long time, the "inner wall method" became the mainstream method for major companies to eliminate floating.

Method 5: overflow: hidden;
Overflow means "overflow", and hidden means "hidden".

Too much content overflows the box

overflow:hidden;The content that overflows the box border is hidden.

The original intention of this style is to clear text that overflows outside the box. However, some front-end siege lion engineers discovered that it can be used as a folk remedy. The writing is simple and crude, easy to understand. It is an additional extension in the W3C document, just like the person who invented the motorcycle would never have thought that the subsequent motorcycle stunts could raise the motorcycle head and drive.

So this overflow: hidden; can also be regarded as an "ancestral old folk remedy" that can cure the old problem of floating and collapse. Of course, since it is a "home remedy", there must be reasons why it cannot be solved under some special circumstances. As a result, it just became unorthodox in terms of "folk remedies".

The special case is that when positioning, if the positioned area exceeds the box, overflow: hidden; will cut off the excess part. So in addition to this old problem, overflow: hidden; its simple and crude writing method still has the ability to compete with the "inner wall method".

Summary:

In fact, there are many ways to clear floats, such as adding a float to the collapsed element and adding an absolute positioning ...wait for some methods.

But adding float will only move the level of the collapsed object up. Adding absolute positioning to the collapsed object will also be affected by other positioned areas. Therefore, in addition to eliminating positioning, these routines that require additional additions of other styles are not within the scope of our concern.

We will only talk about these four mainstream routines for clearing floating collapse in the front-end development process. After listening to these four routines, which method will you use to clear floating collapse in the future? It is estimated that many friends will use the "inner wall method" to remove floating ones. Indeed, the inner wall method was very popular in the past. However, as the times continue to advance, many companies no longer simply use the "inner wall method" in the actual development process

I think some people will complain here, it is not that the mainstream clears the floating 4 A trick? These four routines currently have no problems with the "inner wall method". Is it possible to use unpopular ones?

Don’t worry, the comprehensive method of clearing floats now used in enterprises, also known as the inner wall method 2.0

Add to the floating and collapsed boxes A: after pseudo-class

This method has appeared in various large-scale projects. It can be said to be a panacea for clearing floating! Originally there were four good routines, but now in addition to those four routines, there are several routines for clearing floats. I guess some friends are going to faint.

Let us use mind mapping to help you sort out your thoughts!

The reason why I have made such a big circle for you guys. I’m just afraid to tell everyone this method directly. There will definitely be some friends who are wondering why it is written like this. Now I believe that after reading the routine introduction in this article, you will have a deeper understanding of the method of clearing floats.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of invalid adjustment of z-index attribute on div layer

About turning on hardware acceleration in CSS3 Usage and pitfalls

The above is the detailed content of How to clear floating collapse in css. For more information, please follow other related articles on the PHP Chinese website!