How to clear floats in CSS? Summary of five methods for clearing floats in css

This article introduces to you how to clear floats in CSS? A summary of the five methods for clearing floats in CSS has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Method 1 (use empty tag with clear attribute)

The tag can be a div br　hr

Use an empty element such as

Advantages: simple, less code, good browser compatibility.

Disadvantages: A large number of unsemantic html elements need to be added, the code is not elegant enough, and it is not easy to maintain later.

Add

Solution: font-size:0; or overflow:hidden; Add

Method 2 (adding the overflow attribute to the parent element of the floating element) solves the disadvantage of having to add unintentional code when clearing floats through empty tag elements.

To use this method, you only need to define the CSS property in the element that needs to be cleared: overflow:auto

overflow:auto; to make the height adaptive, zoom: 1; is for compatibility with IE6, and can also be solved with height:1%;

Note: zoom does not comply with W3C standards. overflow:hidden can also be implemented.

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

Method three: (Add float to the container of the floating element, that is, add 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 float to the container of the floating element The container can also add a floating attribute to clear the internal float

Disadvantages: It will make it float as a whole, affecting the layout, and is not recommended.

Method 4: (Use after pseudo-object to clear floats)

after pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing an element The most recent elements) and IEhack are perfectly compatible with the current major browsers. IEhack here refers to triggering hasLayout.

Use the after pseudo-element to add an invisible block element (Block element) to the end of the element to clean up the float.

Add an invisible space "" or dot "." at the end of the internal element of the container through CSS pseudo-elements, and assign the clear attribute to clear the float. It should be noted that for IE6 and IE7 browsers, a zoom:1; must be added to the clearfix class to trigger haslayout.

after pseudo-object is not supported by IE browser, so it does not affect IE/WIN browser. Please refer to the following examples for specific writing methods. Please pay attention to the following points during use.

1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual one;

2. The content attribute is required , but its value can be empty. When discussing this method, the value of the content attribute is set to ".",

<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 5: Use adjacent elements to process

Do nothing and leave floating Add the clear attribute to the element after the element.

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

Usage:

Use the :after pseudo-element method in the main layout of the web page and use it as the main way to clean up floats;

Use overflow:hidden; in small modules such as ul (pay attention to possible hidden overflow element problems);

If it is a floating element, the internal float can be automatically cleared without special processing;

Use adjacent elements in the text to clear the previous float.

Use the relatively perfect :after pseudo-element method to clean up the floats and make the document structure clearer;

BUG correction:

(1), double margin bug Another thing to remember when dealing with IE6 is that setting margins in the same direction as the float will cause
double margins.

Quick fix: set display:inline; on the float and don’t worry, it’s still a block-level element.
(2), 3 pixel spacing means that the text next to the floating element will be magically kicked out by 3 pixels, as if there is a strange force field around the floating element.

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

Quick fix: Use the parent element’s bottom padding instead.

Related recommendations:

Positioning issues in css: absolute positioning, relative positioning, fixed and static

How to implement floating in css Element wrapping

What is float? The principle of css clearing float

The above is the detailed content of How to clear floats in CSS? Summary of five methods for clearing floats in css. For more information, please follow other related articles on the PHP Chinese website!