css 清除元素的浮动方法总结

最新推荐文章于 2023-05-10 18:16:26 发布

断魂蓝桥

最新推荐文章于 2023-05-10 18:16:26 发布

阅读量435

点赞数 1

文章标签： css 浮动清除浮动 float html

本文链接：https://blog.csdn.net/sinat_22319877/article/details/52094399

版权

1、首先说下为什么要清除浮动。

因为元素在浮动后会脱离文档流，从而使父元素感受不到它的高度，不能自己撑开。效果如下图：

2、接下来就来学习下，清除浮动的三种方法：

①在浮动元素后面添加div,然后给div设置的样式设置 clear:both;代码如下

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style>
		div{margin: 2px;}
		.box{
			border: 1px solid green; width: 550px;
		}
		.float{
			width: 100px; height: 100px; background: red;
			float: left;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

②给浮动元素的父级的样式添加overflow:hidden；代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style>
		div{margin: 2px;}
		.box{
			border: 1px solid green; width: 550px; overflow: hidden;
		}
		.float{
			width: 100px; height: 100px; background: red;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
	</div>
</body>
</html>

③使用伪类清除浮动，这也是最好的一种清除方式，具体代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style>
		div{margin: 2px;}
		.box{
			border: 1px solid green; width: 550px;
		}
		.float{
			width: 100px; height: 100px; background: red;
			float: left;
		}
		/*伪类代码*/
		.box:after{
			content: ''; display: block;
			clear: both; display: none;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
		<div class="float"></div>
	</div>
</body>
</html>

清除完浮动后效果如下：