清除CSS浮动的那些事

各个方法的使用和缺点;

代码如下,想要的效果是a和b单独浮动,往下看;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
           
        }
        .box1{

          }
        ul{
            list-style: none;
        }
        li{
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
</div>
<div class="box1">
    <ul>
        <li>b</li>
        <li>b</li>
        <li>b</li>
    </ul>
</div>
</body>
</html>

执行结果是这样子的

第一种清除浮动的方法:给祖先元素.box 增加高度,缺点是不能自适应高度

第二种清除浮动的方法:给浮动父元素元素.box1增加css属性 clear:both,缺点是.box1 的margin会失效

第三种清除浮动的方法:外墙法 在两个浮动元素的中间增加一个div 设置为 clear:both,还可以设置高度用来撑开内容,缺点浮动的盒子模型没有高度;

第三种清除浮动的方法:内墙法  在浮动父元素.box元素结束前增加一个div设置为clear:both,此时盒子.box有高度了;

第四种清除浮动的方法:利用浏览器的hack,在浮动父元素.box上面增加CSS属性 overflow:hidden;

ie6 不支持,在后面添加一行 _zoom:1; 放大就可以清楚浮动,且margin可以使用了。

第五种清除浮动的方法:我认为比较好用的一种方法,利用伪元素清除浮动,增加一个css类;

.clearfix::before,
.clearfix::after{
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

在浮动元素父元素上面添加 html代码 class=”clearfix”即可;

每一个浮动元素父元素建议都要添加哦,清除浮动这潭水很深很深,希望对你有所帮助!!

发表评论

邮箱地址不会被公开。 必填项已用*标注