CSS clear float compatibility method

This time I will bring you cssClear floatfloat compatibility method, css clear float float compatibilityWhat are the precautions for the methodThe following is a practical case, let's come together take a look.

We need to understand two important definitions before clearing floats:

Definition of float: Make the element break away from the document flow, move in the specified direction, and encounter the parent Level boundaries or adjacent floated elements are stopped.

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: Set the height of the parent of the floating element

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.

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 be 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";} Incompatible under IE6 and 7

zoom Zoom

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of focus-within

Detailed explanation of the use of pseudo-elements::before and::after

The above is the detailed content of CSS clear float compatibility method. For more information, please follow other related articles on the PHP Chinese website!