Details: Clear floating

Floating, from the very day of its birth, is a special attribute-not only brings new methods for webpage layout, but also produces a series of problems. Of course, with the passage of time, these problems eventually have some outstanding solutions. Kayo will introduce in detail here, in addition to these solutions, there are also principles. (Warm Tips: The article is informative and long. Please bring your own melon seeds, drinks, and music ).

1. What is clear floating? 1. Floating Defects

Before learning how to clear a float, Kayo explains why float needs to be cleared. As mentioned at the beginning of this article, although floating can facilitate page layout, it also produces some problems, that is, what we often call "Side effects ". An element is floating (that is, the float value is left, right or inherit and inherits the Left or Right value from the parent element) the common defect is that the location of the sibling element that affects it and the height collapse of the parent element.

When an element is set to float, it will affect its sibling elements. The specific impact method is complicated, depending on whether these sibling elements are block-level elements or Inline elements, if the block-level element ignores the floating block box, that is, the effect we usually see-so that it is as close as possible to the same row as the floating element, resulting in overwriting by the floating element, unless these divs are set with width and the width of the parent element is not enough to include them, the sibling element will be forced to wrap the line; if it is an inline element, it will try to enclose the floating element as much as possible.

In addition, the floating element is out of the normal stream, so that the parent element containing it does not automatically support the height because of the existence of the floating element, which will cause the height to collapse.

The following is a demonstration (click the picture to open the big image, the same below)

For more information about these points, see the demo.

Obviously, whether it is affecting the sibling element or the height collapse, it is not the purpose of floating. We set floating, just to change the layout of an element, however, the final result has caused more unnecessary effects, which is not conducive to the layout. Therefore, we need to clear these additional effects, that is, the floating clearance described in this article, in fact, it is more accurate to say that it is to clear the additional impact of floating.

2. Common Methods for clearing floating

After understanding why floating is to be cleared, we can introduce the common methods for clearing floating. However, we are not eager to discuss the principles of these methods. First, we will list several common methods for clearing floating, further discussion.

Speaking of clearing floating, you will surely think of clear: Both. Indeed, this is the property for clearing floating in CSS. Clear has several attribute values: Both/left/right/NONE/inherit, float elements are not allowed on both sides of the element, floating elements are not allowed on the left, floating elements are not allowed on the right, floating elements are not allowed on the right, floating elements are not cleared, and the values of parent elements are inherited.

For example:

You can also view the demo.

From the example, we can see that the elements with clear: Both (clear: Left can also be set in this example) will not walk with floating elements, and will occupy a new whole line, instead of Automatically Adjusting the width based on the content. The reason for this is that, starting from the principle of clear, clear will add enough blank space for the element so that the position of the element will be placed under the floating element before it, this is the same as adding the element margin so that the element occupies full rows and forcing line breaks. In fact, in css1 and css2, the clear float is implemented by automatically adding the margin to the clear element (that is, the element with the clear attribute set). The margin is increased from CSS 2.1 to the extra blank space without changing the margin. Now, we should be clear that since we have added enough space to wrap the element, the safest way is to make the element occupy a whole line, that is, the effect in the demo.

Now the floating is cleared, but this only removes the influence of floating on the sibling element, and the problem of height collapse has not yet been solved. Therefore, we need to clear the floating-closed floating more advanced.

Why is it closed floating? Because the floating element is out of the normal stream, it is not closed for its parent element. In this case, it needs to be closed and floating. After years of development, the solution to this problem has been well developed. The following section describes three common methods.

(1) Empty Div Method

This is an old method. Besides Div, other labels are also used, but div is more suitable, because it has no other styles except the display: block that the browser gives it, it does not have any special functions. In this example, the display: block is the DIV that the browser grants. It exists in the browser's user agent stylesheet, rather than the default display value of the DIV is block. In W3C, the default value of display for all HTML tags is inline.

The box main left aside used in the following code sets the CSS class in advance. For details, refer to the demo source code. This is also true in other examples.

12345

<div class="box">    <div class="main left"> I set float left: Left </div>    <div style="clear: both;"></div>    <div class="aside"> I am the footer, and I added an empty Div with clear: both set above. </div></div>

Effect

You can also view the demo.

The empty Div method is very convenient, but the DIV with no meaning is added, which violates the principle of separation of structure and performance, and is not convenient for later maintenance.

(2) overflow Method

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

1234	<div class="box" style="overflow: hidden; *zoom: 1;">    <div class="main left"> I set float left: Left </div>    <div class="aside left"> I am the footer, but I also set the left floating. </div></div>

Effect

You can also view the demo.

This method is more convenient than the former and more compliant with semantic requirements, but overflow is not designed to close the floating. Therefore, when an element contains a child element that will exceed the parent element boundary, it may overwrite useful child elements or generate redundant scroll bars. This is why we still need to find better methods after the birth of the overflow method.

(3) Use the after pseudo element method

This method is derived from positioniseverything, combined with: After pseudo elements (note that this is not a pseudo class, but a pseudo element, representing the most recent element after an element) and iehack, it can be perfectly compatible with mainstream browsers. Here, iehack refers to triggering haslayout. For details, refer to the following method.

12345678

<style>    . Clearfix {/* trigger 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"> I set float left: Left </div>    <div class="aside left"> I am the footer, but I also set the left floating. </div></div>

Obviously, this method is not only perfectly compatible with mainstream browsers, but also very convenient. using reusable classes can reduce code writing, and the web page structure will be clearer.

Effect

You can also view the demo.

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

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 is published by Kayo Lee. Link: http://kayosite.com/remove-floating-style-in-detail.html

Details: Clear floating