css清除浮动的三种方式

最新推荐文章于 2022-06-23 10:16:20 发布

陌路啉

最新推荐文章于 2022-06-23 10:16:20 发布

阅读量124

点赞数

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_45263818/article/details/105314971

版权

web 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

为什么要清除浮动？

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

清除浮动的本质

需要浮动的子级盒子外部经常套住一个父级标准流盒子，父级盒子通常不方便给高度，因为子级盒子高度不确定。当给子级盒子添加浮动时，由于浮动元素不占有空间，父级盒子高度塌陷为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
}

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

陌路啉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动的三种方式

为什么要清除浮动？浮动的本质是用来做文字混排效果的，但是我们经常用它来做布局，所以会出现许多问题。由于浮动的元素不再占有位置，所以他会对其他元素的排版产生影响，而清除浮动，主要就是为了清除浮动后产生的影响清除浮动的本质需要浮动的子级盒子外部经常套住一个父级标准流盒子，父级盒子通常不方便给高度，因为子级盒子高度不确定。当给子级盒子添加浮动时，由于浮动元素不占有空间，父级盒子高度塌陷为0，此时后...
复制链接

扫一扫

专栏目录