清除浮动的几种方法

最新推荐文章于 2022-10-30 17:03:36 发布

我有一个梦！

最新推荐文章于 2022-10-30 17:03:36 发布

阅读量167

点赞数 1

分类专栏：前端基础-HTML 前端基础-CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_40951289/article/details/104502483

版权

前端基础-HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端基础-CSS

7 篇文章 0 订阅

订阅专栏

为什么要清除浮动？

清除浮动主要是为了解决父元素因为子元素浮动而引起高度为0的问题。

一个需要清除浮动的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动的常见用法</title>
		<style>
			.box {
				border: 1px solid #FF6700;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果图
在这里插入图片描述
如上图所示，父盒子包含盒子一和二，父盒子没有高度，因为盒子一和盒子二有高度，撑开了父盒子。当给盒子一、二添加浮动时，会发生什么？

.one {
	width: 100px;
	height: 100px;
	background-color: coral;
	float: left;
}

.two {
	width: 150px;
	height: 150px;
	background-color: aqua;
	float: left;
}

此时，父盒子变成了一条线，盒子三跑上去了，紧贴父盒子。
在这里插入图片描述
这个时候就出现了需要清除浮动的问题了。

清除浮动的方法

1、给父盒子增加高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动的常见用法</title>
		<style>
			.box {
				border: 1px solid #FF6700;
				height: 150px;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
				float: left;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
				float: left;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果如下
在这里插入图片描述

2、额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both的属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动-额外标签法</title>
		<style>
			.box {
				border: 1px solid #FF6700;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
				float: left;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
				float: left;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}
			
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
			<div class="clear"></div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果如下
在这里插入图片描述

3、父级元素添加overflow属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动-父级元素添加overflow属性</title>
		<style>
			.box {
				border: 1px solid #FF6700;
				overflow: hidden;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
				float: left;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
				float: left;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果如下
在这里插入图片描述

4、使用after伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动-使用after伪元素</title>
		<style>
			.box {
				border: 1px solid #FF6700;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
				float: left;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
				float: left;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}

			.clearfix:after {
				/*伪元素是行内元素 正常浏览器清除浮动方法*/
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
			.clearfix {
				*zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果如下
在这里插入图片描述

5、使用after和before伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动-使用after和before伪元素</title>
		<style>
			.box {
				border: 1px solid #FF6700;
			}

			.one {
				width: 100px;
				height: 100px;
				background-color: coral;
				float: left;
			}

			.two {
				width: 150px;
				height: 150px;
				background-color: aqua;
				float: left;
			}

			.three {
				width: 500px;
				height: 100px;
				background-color: cornflowerblue;
			}

			.clearfix:after,
			.clearfix:before {
				content: "";
				display: table;
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				*zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="one">盒子一</div>
			<div class="two">盒子二</div>
		</div>
		<div class="three">盒子三</div>
	</body>
</html>

效果如下
在这里插入图片描述
以上就是清楚浮动的常用方法。

我有一个梦！

关注

1
点赞
踩
1

收藏

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

为什么要清除浮动？清除浮动主要是为了解决父元素因为子元素浮动而引起高度为0的问题。一个需要清除浮动的例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>清除浮动的常见用法</title> <style> .box {...
复制链接

扫一扫