css清除浮动的几种方式

文章目录[x]
  1. 0.1:为什么要清除浮动?
  2. 0.2:清除浮动的本质
  3. 0.3:清除浮动的方式

为什么要清除浮动?

浮动的本质是用来做文字混排效果的,但是我们经常用它来做布局,所以会出现许多问题。由于浮动的元素不再占有位置,所以他会对其他元素的排版产生影响,而清除浮动,主要就是为了清除浮动后产生的影响

清除浮动的本质

需要浮动的子级盒子外部经常套住一个父级标准流盒子,父级盒子通常不方便给高度,因为子级盒子高度不确定。当给子级盒子添加浮动时,由于浮动元素不占有空间,父级盒子高度塌陷为0,此时后面的盒子就会占据父级盒子的位置,此时盒子里的内容就会被子级盒子遮挡。为了解决这个问题就需要清除浮动。

未添加浮动时

添加浮动后

清除浮动的方式

1.在浮动盒子的后面添加一个空盒子(无需设置宽高)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        .box1{
            background: pink;
            width: 400px;
        }
        .box2{
            width: 500px;
            height: 300px;
            background-color: blueviolet;
        }
        .son1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: brown;
        }
        .son2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: cadetblue;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

优点:通俗易懂
缺点:代码多时不易操作,繁琐

2.给父级添加overflow:hidden;触发BFC,BFC可以清除浮动。

.box1{
    background: pink;
    width: 400px;
    overflow:hidden;
}

优点:代码简洁
缺点:内容增多时容易造成内容隐藏,无法显示溢出的元素

3.:after伪元素清除浮动

.clearfix:before,
.clearfix:after{
      content:"";
      display:block;
      clear:both;
}
.clearfix{
    *zoom:1;//适用于IE6、7
}

优点:浏览器支持好,不容易出现怪问题
缺点:初学者不易理解

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00