Started with clearing float and tracing to the source

If you like to use float for layout, I am confident that you will be abused by float. Although I remember reading a blog post by Dr. Zhang xinxu, float is not actually a layout method. Then balabala is really reasonable. I once thought so, and now I think so. However, in principle, we should be able to have such a bottom line that is easy to use and have a perfect solution to the problem, so there is a reason for existence. Float is unavoidable when we write CSS.

I. Why should we clear the floating

Because an element floats out of the Document Stream, so that the parent element containing it does not automatically raise the height because of the existence of the floating element. This is called "height collapse".

At the same time, if an element is set to float, it will affect its sibling element. The specific impact depends on whether the sibling element is a block-level element or an inline-level element. If block-level element su Hui ignores this floating element, the floating element will be overwritten, unless these divs are set to width and the width of the parent element is sufficient to include them, in this way, the sibling element will be forced to wrap the line. If it is an inline-level element, try to enclose the floating element as much as possible.

2. method 1 for clearing floating: clear: Both --- do not expand here 2. Empty Div Method

<Div class = "box"> <Div class = "main left"> set left floating float: Left </div> <Div style = "clear: both; "> </div> <Div class =" aside "> I used to view results </div>

3. Overflow Method

The overflow value is set to Den den or auto on the Fu element of the floating element, which can be closed and floating. Haslayout needs to be triggered in IE6, for example, setting the container width for the parent element or setting ZOOM: 1.

<Div class = "box" style = "overflow: hidden; * ZOOM: 1;"> <Div class = "main left"> set left floating float: left </div> <Div class = "aside left"> also sets the left float. </Div>

4. Use the after pseudo element

Note that it is a pseudo element, not a pseudo class. A pseudo element represents the most recent element after an element. This method is perfectly compatible with mainstream browsers. However, in IE, we need iehack. The iehack used here triggers haslayout.

<Style>. clearfix {/* triggers haslayout */ZOOM: 1 ;}. clearfix: After {content: & quot ;. & quot; display: block; Height: 0; clear: Both; visibility: hidden ;} </style> <Div class = "box Clearfix"> <Div class = "main left"> set the left floating float: left </div> <Div class = "aside left"> also sets the left float. </Div>

Iii. essence of clearing floating methods-clear and BFC features of CSS

Through the above example, we can easily find that the methods for clearing floating can be divided into two types:

First, use the clear attribute, including adding an empty Div with the clear: Both attribute at the end of the floating element to close the element. In fact, use: the After pseudo-element method is also implemented by adding a content at the end of the element as a vertex with the clear: Both attribute.

The second is to trigger the block formatting contexts (Block-level formatcontext) of the floating element parent element so that the parent element can contain floating elements, the following section describes Kayo in detail.

BFC plays an important role in the visual formatting model of CSS. Many developers encounter many puzzling problems in actual development because they do not understand the features of BFC. Despite this, BFC involves a few sections of CSS, so there are few domestic introductions. Here, Kayo will describe it.

1. What is BFC?

BFC (Block formatting contexts) is a block-level formatting context. From the style perspective, it is no different from a common container, but in terms of function, BFC can be considered as an isolated independent container. Elements in the container do not affect the elements outside the container layout. BFC has some features that are not available in common containers, such as floating elements, the second method (such as the overflow method) above triggers the BFC of the parent element so that it can contain floating elements to prevent high collapse.

2. How to trigger BFC

The conditions for triggering BFC are as follows:

• Floating element, float value except none
• Absolute positioning element, position (absolute, fixed)
• Display is one of the following values: inline-blocks, table-cells, table-Captions
• Value (hidden, auto, scroll) other than visible in Overflow)

In css3, BFC is called flow root and some triggering conditions are added:

• Table-Caption value of Display
• The fixed value of position is actually a subclass of absolute. Therefore, using this value in css2.1 also triggers BFC, but it is more clear in css3.

3. Features of BFC

BFC has three main features:

(1) BFC will prevent the outer margin from being folded

Two Connected divs are superimposed on the vertical margin. Some books will list this issue as a bug. Kayo does not agree here, although this type of folding may cause some inconvenience to developers who are not familiar with CSS layout, it actually has complete and specific folding rules and exists in mainstream browsers, so Kayo thinks this should be a feature of CSS. Of course, in actual development, we may sometimes do not need this fold. In this case, we can use one of the features of BFC to prevent outer margin overlay.

(2) BFC can contain floating Elements

This is exactly the principle of using overflow: hidden and overflow: auto to close the floating. Using overflow: hidden or overflow: auto to trigger the BFC feature of the floating element parent element, it can contain floating elements and close floating.

The original W3C text is "'auto' heights for block formatting context roots", that is, BFC automatically adapts to the height based on the condition of sub-elements, even if its sub-elements include floating elements.

However, IE6-7 does not support W3C BFC, but instead uses self-produced haslayout. In terms of performance, it is very similar to BFC, but haslayout itself has a lot of problems, leading to a series of bugs in the IE6-7. The conditions for triggering haslayout are similar to those for triggering BFC. Kayo will write an article for details. Here, Kayo recommends setting the CSS attribute specific to IE for the element ZOOM: 1 to trigger haslayout. Zoom is used to set or retrieve the zoom ratio of the element. If the value is "1", the actual size of the element is used, using ZOOM: 1 can trigger haslayout without affecting the elements, which is more convenient.

(3) BFC can prevent elements from being overwritten by floating Elements

As mentioned above, the block sibling element of a floating element will ignore the position of the floating element and try to fill the whole line as much as possible, so that it will be overwritten by the floating element, triggering BFC for this sibling element can prevent this situation.

To illustrate the nature of BFC for clearing floating, Kayo has used a lot of space here to introduce BFC, but BFC is not the center of this article, and the mechanism of BFC is also quite complex, so Kayo will write a more detailed article about BFC based on the above BFC content, and create a demo to explain the actual situation.

3. More methods to clear floating

After learning about the principle of clearing floating, it is hard to imagine that the method of clearing floating is not just the three mentioned above, for example, using the BFC feature, you can also use the following methods to trigger BFC and clear floating.

Add float to the parent element of the floating element, but it needs to be moved to the body all the time. This method is not recommended.

Add display: Table-cells to the parent element of the floating element. However, this undoubtedly changes the box model and is not recommended.

It can be seen that these methods are convenient, but they also have obvious disadvantages, which also makes the above three methods more suitable for actual projects.

According to the semantic requirements, Kayo suggests that the overflow method or: After pseudo element method be used in actual projects. The overflow method is convenient. If all the internal elements are floating elements and the content does not exceed the parent element box, the overflow method can be directly used. However, this method triggers BFC after all, as mentioned above, BFC has multiple features. To avoid unnecessary impact, if you need to clear the layout of floating elements, you can directly use the after pseudo element method.

This article from: http://kayosite.com/remove-floating-style-in-detail.html (from the clear Floating Method directly reproduced, the head is my processing) If there is reprint, please respect the original author, indicate the source of the article, THX