Clear Floating Method resolution, clear floating resolution

Clear Floating Method resolution, clear floating resolution
Clear Floating Method parse to clear the additional impact of floating

If you are not familiar with float, you can refer to the articles about float. Portal: CSS float

We know that if a floating element is encountered in a parent element, the height of the parent element will collapse. There are already many solutions for the high collapse of the parent element. For each solution, we conduct in-depth analysis.

Add an empty block-level element

This method is relatively easy, but it should be noted that this empty element must be a block-level element, not an in-Row Element or in-row block element. The disadvantage is that there are more meaningless labels. The Code is as follows.

// HTML <div class = "content"> <div class = "float"> </div> <div class = "clearfix"> </div> // used to clear float the element must be a block-level element </div> // CSS. content {background: pink ;}. clearfix {clear: both ;}. float {width: 50px; height: 50px; float: left; background: tan ;}

The reason why the clear attribute can be used to clear the extra impact of floating also needs to return to the essence of the clear attribute.

The clear attribute specifies which side of the element does not allow other floating elements.

Essence: In CSS2.1, the clear attribute adds a clear space to the top margin of the clear element (that is, the element with the clear Attribute Set), while the outer margin of the element does not change. Let's talk about the details, that is, setting the elementclear:left|right|bothThe upper and outer margin boundary of the clear element is under the bottom margin boundary of the floating element on the edge.

Overflow

Set in parent Elementoverflow:hidden|auto|scrollIt can solve the problem of parent element height collapse. Why can overflow be used to solve the problem of parent element height collapse? This involves another knowledge point, namely, BFC (Block-level formatting context). Let's look at the solution first. Next article on principles.

Parent element settings: overflow: hidden | auto;

The following figure shows how to set the frontend and backend of overflow.

: After pseudo element

Adding the "after" pseudo element to the parent element can solve the problem of parent element height collapse.

// HTML <div class = "content"> <div class = "float"> </div> <p> will overwrite it? </P> </div> // CSS. content {background: tan; &: after {content :'. '; display: block; clear: both; height: 0; visibility: hidden ;}}. float {width: 100px; height: 100px; float: left; background: olive ;}

Put it on the browser, and the height of the parent element is displayed normally.

To understand the solution of resolving parent element height collapse by a pseudo element, you need some additional knowledge.

Floating

• When an element is floating (left | right), the element is detached from the normal document stream.
• When an element floats and there is no text content behind the DOM, the floating element overwrites the element that follows it.
• When an element floats and the element behind the DOM has text content, the floating element overwrites the element that follows it, but the text is displayed around the float element, instead of being overwritten.

What does it mean? In fact, it is quite understandable to think carefully. Here we will put a piece of code to explain the first three points.

// HTML is the same as above. div is replaced with span, and class is replaced with float-inline. // CSS. float-inline {float: left; width: 100px; height: 100px; background: pink ;}

The results are as follows.

In this case, you can set the width and height to indicate that the line box of the inline element span is changed to a block box. At the same level as the floating element, the next element has the text content, and the text is surrounded by the float element. The height of the parent element collapsed because of the existence of floating elements.

Pseudo element

A pseudo element, as its name implies, is a content that is added after an element.

• The add of pseudo element content must be placed in the content attribute.
• Pseudo elements are intra-row elements, but the type of the box of pseudo elements can be changed through display.

OK. We have mastered the knowledge needed to clear the floating with the after pseudo element. Put on the solution. Analysis in order.

. Clearfix: {zoom: 1} // triggers haslayout of IE .. clearfix: after {content :'. '; display: block; clear: both; height: 0; visibility: hidden ;}

• Set the content of a pseudo element to '.'. The content can be stored in any way.
• Set height: 0;
• Set visibility: hidden. Here we want to hide the content.
• Set clear: both. Float is not allowed on both sides of the pseudo element.
• The most important thing is to set the display attribute to block, which can only be block, not inline-block. As mentioned above, pseudo elements are in-row elements, and in-row elements cannot be configured with width or height. Set display: block. At this time, you can set the width and height of the element to 0. At this time, the element does not occupy any height. If only the first four attributes are set, and the display of the pseudo elements is not changed, the result will be ineffective.

Here we will introduce three methods for removing the additional effects of floating. The additional effects here refer to the effects of floating elements on sibling and parent elements. Here is a smallSummary:

• The idea of adding an empty div and A: after pseudo element is to use the clear attribute. The clear attribute increases the clearance space on the top margin of the clear element (that is, the element with the clear Attribute Set), while the margin of the element itself does not change. In addition, the boundary of the upper and outer margins of the elements to be cleared is just under the boundary of the floating element. So as to achieve the effect of clearing the floating.
• When the parent element uses overflow, It is not set to visible.overflow:hidden|autoIn this case, the floating point can be cleared. This article introduces the concept of BFC.

-This article Reprinted from: http://www.cnblogs.com/Uncle-Keith/p/6082667.html