--Quickly solve the problem of css clearing floating

Why clear floats?

Because if the child box is set to float and the parent box has no height, the floating child element will float in the air ( out of the standard flow ), the child box will be separated from the parent box, and the height of the parent box will become 0.

How to clear floats? Which method is best?

The first:

Set a fixed height for the parent box: Because the child box floats, it will depart from the standard stream, and set a fixed height for the father, so that the parent box is fixed, but what if there is still a lot of content below? So this method is not rigorous and inflexible .

The second type:

The last child back to a floating element added to the div tag, div set clear: both style: This method can also clear the float, but not recommended .

The third type:

Add overflow: hidden to the parent element: this method can also clear the float, overflow: hidden; not only can clear the float, but also solve the problem of overflow hiding, and solve the problem of margin collapse, but this method of clearing floats is not good. Because overflow:hidden is added to the parent element, the parent element is also set to overflow hidden, but this is what we don't want to see. This method is not applicable.

Fourth:

Use the after pseudo-element to clear floats. It is better to write single quotes for pseudo-elements, because single quotes are more compatible (recommended)


    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

Here are four ways to verify the removal of floats by nesting two sub-boxes in a large box.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .box {
            border: 1px solid #000;
            /* 清除浮动第一种方法：父元素加固定高度(缺点：不够灵活) */
            /* height: 200px; */
            /* 2.  父元素加overflow:hidden  缺点父元素加了溢出隐藏*/
            /* overflow: hidden; */
            /* 3. 给最后一个浮动子元素后面加div标签   div设置clear:both样式 缺点：增加div标签代码多余*/
            /* 4 伪元素清除浮动 */
        }
        
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background: cyan;
        }
        
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</head>

<body>
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear: both;"></div>

    </div>
</body>

</html>

Quickly solve the problem of css clearing floating

--Quickly solve the problem of css clearing floating

Guess you like