How does css clear floating? CSS clear floating Five ways to summarize

This article is about how CSS clears the float. CSS clear floating Five ways to summarize, there is a certain reference value, the need for friends can refer to, I hope to help you.

Method One (use empty label with clear property)

The tag can be div br HR

After floating the element, use an empty element such as <p class= "clear" ></p>, and give the. Clear{clear:both in the CSS;} property to clean up the float. You can also use <br class= "clear"/> or

Pros: Simple, less code, better browser compatibility.

Cons: You need to add a lot of non-semantic HTML elements, the code is not elegant, late maintenance is not easy.

Under floating elements Add <p class= "clear" ></p>. clear{Height:0px;font-size:0;clear:both;}, but under IE6, the block element has a minimum height, that is, when the height When <19px, the default is 19PX

Solution: font-size:0; or Overflow:hidden; Add <br clear= "All" under floating elements > to clear floating

Method two (adding the overflow attribute to the parent element of a floating element) solves the drawback of having to add unintentional code by clearing the float with an empty label element.

Using this method is simply to define the CSS properties in the element that needs to clear the float: Overflow:auto

Overflow:auto, is to let highly adaptive, zoom:1, is to be compatible with IE6, can also be used height:1%;

Note: Zoom does not conform to the standard. Overflow:hidden can also be implemented.

<ul style= "overflow:auto;zoom:1><li>aaa</li><li>bbb</li><li>ccc</li> </ul>

Method Three: (adds float to the container of the floating element, that is, adds float to the parent to clear the float)

<div style= "Float:right;background-color: #1a1a1a;" >   <div style= "Float:right;width:300px;height:300px;background-color: #2a85a0;" >    </div>   <div style= "Width:500px;height:200px;background-color: #8a6d3b" >    </div ></div>

Add floating properties to the container of the floating element to clear the inner float

Disadvantage: It will make its overall floating, affect the layout, not recommended to use.

Method Four: (clear float with after pseudo-object)

After pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing the most recent element after an element) and iehack, can be perfectly compatible with the current mainstream of the major browsers, here Iehack refers to the trigger haslayout.

An invisible block element is added to the end of the element by an after pseudo-element implementation to clean up the float.

An invisible space "" or a dot "is added to the inner element of the container through a CSS pseudo-element, and a clear property is given to clear the float. Note that in order to IE6 and IE7 browser, to Clearfix this class to add a zoom:1; trigger haslayout.

After pseudo-object non-IE browser support, so does not affect the Ie/win browser. You can refer to the following example for specific wording. Attention should be paid to the following points in use.

The method must be set height:0 in the pseudo-object that needs to clear the floating element, otherwise the element will be higher than the actual number of pixels;

The content property is required, but its value can be empty, and the value of the Content property is set to "." When discussing the method.

<style type= "Text/css" >. listinfo:after{      display:block;      Clear:both;      Content: "";        Visibility:hidden;      height:0;} <ul class= "Listinfo" ><li>AAA</li><li>BBB</li><li>CCC</li></ul>

Method Five: Use adjacency elements to process

Do nothing, add the clear property to the element that follows the floating element.

method is similar to adding an empty tag, except that the element adjacent to the floating element is used here

Use case:

Used when the main layout of the Web page: after pseudo-element method and as the main cleanup floating mode;

Use Overflow:hidden in small modules such as UL; (be aware of possible hidden overflow element issues);

If it is a floating element, it can automatically clear the internal float without extra processing;

The body uses the adjacency element to clean up before the float.

Use the relatively perfect: after pseudo-element method to clean up the float, the document structure is clearer;

Bug fixes:

(1), double margin bug when handling IE6, another thing to remember is that if you set margin (margin) in the same direction as the floating direction, the
Double margins.

Quick fix: Give floating set display:inline; And don't worry, it's still a block-level element.
(2), 3 pixel spacing is the text that is next to the floating element will magically be kicked out of 3 pixels, as if the floating element is surrounded by a strange force field.

Quick FIX: Set the width or height on the affected text.
(3), IE7, bottom margin bug is that when a floating parent element has a floating child element, the bottom margin of these child elements is ignored by the parent element.

Quick FIX: Replace with parent element's bottom padding (padding).