Some small insights about floating cleanup, 4 ways to clear floating

How to get out of the standard document flow, CSS gives three ways to get an element out of the standard document flow.

1. Floating.  2. Absolute positioning. 3. Fixed positioning.

One, what is floating it? 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.

Two, the floating element has 4 points characteristics:

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.

Third, the method of clearing floating.

1. Add height (parent element or ancestor element) to the ancestor element of the floating element. As long as the float is in a height box, then this float will not affect the back of the element, that is, if there is a floating inside the box, the box is high, then the proper, floating will not affect each other. So it clears the impact of the float. Floating elements can only be closed by a box with a height. However, at work, we never add height to all the boxes, because of the hassle and the inability to adapt to the rapid changes in the page. (Not recommended)

.

2.clear:both; Clear off the floats on both sides. But there is a very deadly problem, margin is invalid, there is no gap between the top and bottom.

3. Partition method. is to add a <div> between the two sections, and set a height. There is "inside the Wall Hair": is in the block inside put a <div>, set the height, not only not let the back to chase the front, and can give the outside <div> to support a height.

Note: The element that is off the mark is not able to pull the parent element out of the height drop.

External Wall method:

Inner Wall method:

4.overflow:hidden; A parent element cannot be stretched out of height by his own floating son.  However, as long as the father with Overflow:hidden, then the father can be the son to support the height. The most important thing is to use Overflow:hidden to make the margin effective! You're not mistaken, it's the sauce.

On the issue of floating on the sauce, there is nothing wrong place want everyone to give advice.

Some small insights about floating cleanup, 4 ways to clear floating