Summarize several methods of clearing floats in CSS and how to deal with compatibility

This article mainly introduces the summary and compatibility processing of the seven common methods of clearing floating floats in CSS. It is of great practical value. Friends in need can refer to it.

We need to understand two things before clearing floats. An important definition:

The definition of floating: Make the element break away from the document flow, move in the specified direction, and stop when it encounters the parent boundary or adjacent floating elements.

Height collapse: The height of the parent element of the floating element is adaptive (when the parent element does not write the height, and the child element writes the float, the height of the parent element will collapse)

After knowing floats and why they should be cleared, we can start to learn how to clear floats. At this time we need to use the attribute clear,
clear: left | right | both | none | inherit: a certain direction of the element There can be no floating elements on
clear:both: Floating elements are not allowed on the left and right sides.

There are several main ways to specify floating:

1. clear clear floating (add empty p method)

Add an empty p below the floating element and write css style to the element:

 {clear:both;height:0;overflow:hidden;}

2. Method: Give the floating element a parent Level setting height

We know that the height collapse is caused by the adaptive height of the parent of the floating element, so we can solve this problem by setting an appropriate height for it.

Disadvantages: Not applicable when the height of the floating element is uncertain

3. Method: float (parent floats at the same time)

What does "floating to float" mean? That is to make the parent of the floating element also float.

Disadvantages: You need to add floats to the parent of each floating element. Too many floats can easily cause problems.

4. Method: Set the parent to inline-block

Disadvantages: The left and right margins of the parent are invalid and cannot be used. Margin: 0 auto; is centered

5. br clear float

<p class="box">
    <p class="top"></p>
    <br clear="both" />
</p>

br tag has its own clear attribute. Setting it to both is actually the same as adding an empty p. the same.

Problem: It does not meet the requirements of separation of structure, style and behavior in work.

6. Add overflow:hidden clear float method to the parent;

Problem: Need to match the width or zoom to be compatible with IE6 IE7;

overflow: hidden;
*zoom: 1;

7. Universal clearing method after pseudo-class clear floating (now the mainstream method, recommended)

选择符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }

At the same time, in order to Compatible with IE6, 7 also needs to be used with zoom. For example:

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}

Things to note:

after pseudo-class: add content at the end of the element;

:after{content"added content";} IE6 and 7 are not compatible

zoom zoom

a. Trigger haslayout under IE so that the element calculates the width and height based on its own content . b. FF is not supported;

The above is the detailed content of Summarize several methods of clearing floats in CSS and how to deal with compatibility. For more information, please follow other related articles on the PHP Chinese website!