On the method of clearing floating collapse in CSS

This article mainly introduces the method of removing floating collapse in CSS, has certain reference value, now share to everybody, need friend can refer to

In the process of using CSS, more or less will encounter the problem of clear floating. So this article summarizes the p+css of the 4 ways to clear floating collapse, I believe it will be useful to learn from you or use P+CSS can help, the need for friends below to see it together.

What is floating?
The definition says: A floating box can move left or right until its outer edge touches the border of the containing box or another floating box. In fact, the fast-level elements can be turned into a line with other fast levels.

The floating element has a 4-point feature:
1. Floating elements are separated from the standard document stream, and the fast and the line are not distinguished.

2. Floating elements will snap to each other.

3. The floating element has the effect of "word circumference".

4. Shrinkage. A floating element that, if not set width, is automatically shrunk to the width of the text.

Also in front of the siege Lion's road, we are sincere and dedicated to learning and enterprising. But first the major browser manufacturers of the war, causing us this group of learning people miserable, an aquatic hot ah. Have to think into various hack methods to solve. (yes, this is the ie6! of the Spit.) ）

Second, the standard flow of the document, after the float will also dig down the crater of the collapse. Beginners slightly careless, collapsed out of control of the child elements everywhere, get your chicken fly dog jump miserable. So in order to the back of the front end of the road, the farther away, the following to explain to you to clear the floating 4 kinds of routines.

But when we were talking about the routines, we incidentally made the same move by collapsing the big pits after the float.

Floating collapse Pit:
Let's start with a little demo: There are now two p,p without any attributes. Each p has Li, all of which are floating first in the HTML skeleton section

The following is the CSS style:

See here, if say has not eaten the floating collapse big loss classmate, certainly will think this webpage effect is this appearance

But actually the browser's final rendering looks like this:

Li in the second p, to paste the last Li side of the first p.

The reason is because P has no height and cannot give itself to floating children, a container.

So Li in the second p is going to stick to the last Li side of the first p!

This phenomenon is also known as floating collapse phenomenon!

After talking about the floating collapse, let me get back to the point of today. 4 ways to clear floating collapses

Method 1: Add a height to the ancestor of the floating element

If an element is to float, its ancestor elements must have a height. Height of the box in order to close the float.

As long as it floats in a box with height, the float will not affect the trailing elements. So it is to clear the impact of floating.

So you only need to give Li's superior ul or p a height:40px; (as long as the upper element of the floating element is possible.) ), then the second p is squeezed down and shown below the first box.

Method 2:clear:both;
However, in the actual development process, high height is seldom seen. Why? Because the content can be propped up high! That is to say, we have just explained the method 1, the work used very little.

So here are some people can be brain hole open: Can not write height, also the float cleared it? Also let float between, do not affect?

In fact, the solution is to add a clear:both to his superiors, the first clear is to remove the meaning, both, representing the left float and right float are cleared away. In layman's terms, it means to clear the influence of others on me.

Although this can clear the floating collapse phenomenon, but also has a fatal problem. That is, between two p, the margin value is invalid and cannot be set. Again, it means between two p.

Method 3: Partition method
Since the use of Clear:both will cause two p between the margin failure, then someone in the back began to open the brain hole. In the middle of an empty box, and then give the empty box clear:both; (To make it easier for everyone to see the effect, there is no empty box, but there is a high, colored box.) ）

After adding a wall, the second p can fall off and not interfere with the above elements. And the second P can also be adjusted by magin-top two P ("wall" p not counted) between the spacing, so the partition method as a new routine along the spread.

Method 4: Partition method Evolution version-Interior wall method
There is a human being in this world-perfectionists, whose flaws are never allowed in their worldview. Then in the front-end industry, there are a number of pursuit of perfectionism front-end siege lion. They were completely unacceptable to the small flaws in the partition law, so this group of perfectionist front-end siege Lions began to evolve into the perfect transformation of his partition method.

So the "inner wall method" was born, first look at the code structure:

Just change the position of the wall, the perfect solution the first p cannot be adjusted by Margin-bottm to the spacing between the p below.

So for a long time, the "inner wall method" has become the major companies to clear the floating mainstream writing.

Method 5:overflow:hidden;
Overflow is "overflow" means, hidden is "hidden" meaning.

Too much content, overflowing the box

Overflow:hidden; Overflow the contents of the box border, hidden.

This style is meant to erase text that overflows outside the box. However, some front-end siege Lion engineers found that it can do folk remedies. The wording is simple and rough, good understanding. The additional expansion of the documents in the document, like the invention of motorcycles will never think, behind the motorcycle stunt can be the motor head up and running.

So this overflow:hidden, but also is a "ancestral old folk prescription", can cure floating collapse. Of course, since it is "folk prescription", there must be some special circumstances can not solve. Cause just become "folk prescription" on the unorthodox.

The special case is the position, if the location of the area beyond that box, Overflow:hidden, will be a lot of parts cut off. Therefore, in addition to this normal, Overflow:hidden, its simple and rough writing, or with the "inner wall Method" a struggle Zhengshi ability.

Summarize:

In fact, there are many routines to clear the float, such as the floating collapse of the element to add a floating, add an absolute positioning ... And some other methods.

Adding floats, however, simply moves the collapsed object's hierarchy up, adding an absolute position to the collapsed object as well as being affected by other targeted areas. So the elimination of the positioning, but also need to add a different style of the pattern is therefore not in the scope of our attention.

We only talk about these 4 kinds of front-end development process to clear the floating collapse of the routine, after listening to the four kinds of routines, the future of the small partners will use which way to clear the float it! It is estimated that many small partners will use the "inner wall method" to clear the floating, and indeed the interior wall method was previously popular. However, with the Times is continuous progress, many enterprises in the actual development process is no longer pure use of the "internal wall method"

It is estimated that some people will vomit trough, is not agreed to mainstream clear floating on the 4 kinds of routines? These 4 kinds of routines on the current "internal wall method" No exposure problems, difficult to use unpopular?

Don't worry, now the enterprise inside the use of the method of clearing the float, aka internal wall Method 2.0

Add one to the floating collapsed box: after Pseudo class

This method has appeared on various large-scale projects, can be described as clear floating balm! Originally agreed to four kinds of routines, now in addition to the four kinds of routines but suddenly stretched out several kinds of clear floating routines, estimated some small partners to faint.

Below let us through the mind map to help, dizzy head of the boys to organize ideas!

The reason for the small partners around such a large circle. Is afraid to take this method directly to tell everyone. There will be some small partners wondering why to write, and at this time see believe that you read this article of the routine introduction, to clear the floating method has a deeper understanding of it.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!