High robustness css --- Float details, css --- float

High robustness css --- Float details, css --- float

(1) about float

First, we understand that the principle of CSS web page layout is to display the object declaration in the HTML code in the stream layout order, the stream layout has to talk about float floating technology .. All objects in HTML are divided into two types by default: block element and inline element. Although variable elements exist, however, it is determined that the element is a block element or an inline element based on the context.

In fact, the float attribute of CSS is used to change the default display mode of block element objects. When the float attribute is set for a block object, it no longer occupies one row. It can be moved to the left or right.

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.

Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box.

Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.

If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.

As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":

Line box and cleanup

The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box. Therefore, creating a floating box allows the text to be centered around the image:

To prevent rows from being moved around the floating box, you must apply the clear attribute to the box.

The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box.

To achieve this effect, add enough space on the top and outer margins of the elements to bring the top edge of the elements vertically down to the floating box:

This is a useful tool that allows the surrounding elements to leave space for floating elements. Let's take a closer look at floating and cleaning. Suppose you want an image to float to the left of the text block and want the image and text to be included in another element with the background color and border.

You may write the following code:

In this case, a problem occurs. Because the floating element is out of the Document Stream, the div surrounding the image and text does not occupy space.
How can we visually enclose floating elements? You need to apply clear somewhere in this element:

Unfortunately, a new problem occurs. Because there is no existing element to be cleaned up, we can only add one empty element and clear it.
.news { background-color: gray; border: solid 1px black; }.news img { float: right; }.news p { float: right; }.clear { clear: both; }<div class="news"><p>some text</p><div class="clear"></div></div>
In this way, we can achieve the desired effect, but we need to add additional code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.
However, another method is to float the container div:
.news { background-color: gray; border: solid 1px black;float: left;}.news img { float: right; }.news p { float: right; }<div class="news"><p>some text</p></div>
This will achieve the expected results. Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float everything in the layout, and then use appropriate meaningful elements (often the footer of the site) to clear the float. This helps reduce or remove unnecessary tags.
In fact, all pages on the W3School website use this technology. If you open the CSS file, you will see that we have cleaned up the footer div, the three divs on the footer all float to the left.
(2) Summary of Css floating clearing methods:
Method 1: use an empty element with the clear attribute
Use an empty element after the floating element, such as <div class = "clear"> </div>, and assign the. clear {clear: both;} attribute to the CSS to clear the floating. You can also use <br class = "clear"/> or 
Advantages: simple, less code, and good browser compatibility.
Disadvantage: a large number of non-semantic html elements need to be added. The code is not elegant enough and is not easy to maintain in the future.
Method 2: Use the overflow attribute of CSS
Adding overflow: hidden; or overflow: auto; to the container of the floating element can clear the floating. In addition, hasLayout needs to be triggered in IE6. For example, setting the container width and height for the parent element or setting zoom: 1. After the overflow attribute is added, the floating element returns to the container layer, supporting the height of the container to clear the floating.
Method 3: Add a float to the container of the floating Element
Adding the floating property to the container of the floating element can clear the internal floating, but this will make the overall floating, affecting the layout, not recommended.
Method 4: Use Adjacent Elements for processing
Do nothing. Add the clear attribute to the element after the floating element.
Method 5: Use the "after" pseudo element of CSS.
Combined with: after pseudo elements (note that this is not a pseudo class, but a pseudo element, representing the latest element after an element) and IEhack, it can be perfectly compatible with mainstream browsers, here, IEhack refers to triggering hasLayout.
Add a clearfix class to the container of the floating element, and then add an invisible Block element to the end of the after pseudo element to clear the floating.
<Html> 
The CSS pseudo element adds an invisible space "020" or dot "." at the end of the internal element of the container, and assigns the clear attribute to clear the float. Note that for IE6 and IE7 browsers, add a zoom: 1 to the clearfix class to trigger haslayout.
(3) Notes Summary
 
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.
 

     

 
      
Use the "after" pseudo-element method in the main layout of the webpage as the main method for clearing floating;
 
      
Use overflow: hidden in small modules such as ul (pay attention to possible hidden overflow element issues );
 
      
If it is a floating element, the internal floating can be automatically cleared without extra processing. In the body, use the adjacent element to clear the previous floating.
 
      
Finally, we can use the perfect: The after pseudo element method to clear the floating, and the document structure is clearer.