CSS清除浮动的几种方式

最新推荐文章于 2024-07-21 22:38:03 发布

Percy

最新推荐文章于 2024-07-21 22:38:03 发布

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45017439/article/details/117026090

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（一）为什么要清除浮动？

添加浮动之前：

给father元素添加border
在father这个父元素内部添加两个子元素（son1和son2）（注意：这里son1和son2并没有设置浮动）
在father元素下面添加一个footer元素。

可以得到以下显示结果：
在这里插入图片描述

添加浮动之后：

在这里插入图片描述

结果发现：

father元素变成了一条线，footer元素上移。这也就是我们所说的高度塌陷。

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时父元素就会产生高度塌陷。

所以， 我们就需要清除浮动，避免高度塌陷的情况发生。

基本结构的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .son1{
            width: 400px;
            height: 400px;
            background: darkorange;
            float: left;
        }
        .son2{
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }
        .father{
            border: solid 1px;
        }
        .footer{
            width: 1000px;
            height: 300px;
            background: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
</div>
<div class="footer">footer</div>
</body>
</html>

（二）清除浮动的几种方式

（1）给父元素定义overflow: hidden;（不推荐！）

不推荐！ 溢出元素框的部分会被隐藏。布局时需要注意。

在这里插入图片描述

清除浮动后的显示：
在这里插入图片描述

（2）在浮动元素后面添加一个空标签，并定义clear: both;（不推荐！）

不推荐！ 增加了一个空标签，语义化差，不利于页面优化。

clear: both;的意义：闭合浮动，不让子元素溢出元素框。

	<style>
		.clear{
			clear: both;
		}
	</style>

<body>
<div class="father">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
    <div class="clear">我是一个空标签</div>
</div>
<div class="footer">footer</div>
</body>

清除浮动后的显示：（当然，实际使用时，空标签内不添加任何内容，我加了文字方便大家理解空标签的位置）
在这里插入图片描述

（3）使用after伪元素清除浮动（推荐！）

推荐使用！ 符合闭合浮动思想，结构语义化正确。

但是，IE6不支持伪元素:after，需要设置zoom: 1;触发hasLayout。

	<style>
		.father{
			border: solid 1px;
			*zoom: 1;
		}
		.father:after{
			content: "";
			clear: both;
			display: block;
			height: 0;
		}

	</style>

<body>
<div class="father">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
</div>
<div class="footer">footer</div>
</body>

清除浮动后的显示：
在这里插入图片描述

Percy

关注

2
点赞
踩
8

收藏

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

（一）为什么要清除浮动？（1）添加浮动之前：给father元素添加border在father这个父元素内部添加两个子元素（son1和son2）（注意：这里son1和son2并没有设置浮动）在father元素下面添加一个footer元素。可以得到以下显示结果：（2）添加浮动之后：结果发现： father元素变成了一条线，footer元素上移。这也就是我们所说的高度塌陷。高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时父元素就会产生高度塌陷。所以，我们就需要清除浮动，
复制链接

扫一扫