清除浮动几种方法个人总结

1，为父元素添加高度：

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>
</div>

如上简写，只需给父元素设置height：200px即可

2，在最后添加一个清除浮动的div，但这个方法多写了一个标签，不推荐使用：

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>
    <div class="clear:both"></div>
</div>

3，给父元素加over-flow:hidden

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

给父元素加over-flowLhidden即可

4，伪类元素：网易搜狐常用

但是为了兼容IE6，IE7 要加上.clearfix{zoom:1}
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;

}

<div class="clearfix">
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

5，bootstrap框架封装好的清楚浮动的样式，除非用到了这个框架，不然以上四种就够用了

<div class="clearfix">
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

应用此框架只需在父元素加上class=”clearfix”即可，什么样式也不用写。
6、双伪元素小米，淘宝常用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
    <style type="text/css">
    .father{
        width: 600px;
        height: auto;
        border:1px solid red;
    }
    .child1,.child2{
        background: pink;
        width: 250px;
        height: 250px;
        float: left;
    }
    .clearfix:before,.clearfix:after{  /*真正意义上的闭合浮动*/
        display: table;
        content: "";
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{ //IE6
        zoom:1;
    }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">哥哥</div>
        <div class="child2">妹妹</div>
    </div>
</body>
</html>

清除浮动几种方法个人总结

猜你喜欢