css清除浮动

最新推荐文章于 2025-05-23 14:10:47 发布

Mr_chenweida

最新推荐文章于 2025-05-23 14:10:47 发布

阅读量215

点赞数

分类专栏： CSS 文章标签： css html 清除浮动

本文链接：https://blog.youkuaiyun.com/Mr_chenweida/article/details/119697424

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one {
			width: 500px;
			border: 1px  solid red;
		}
		.one1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.one2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="one1"></div>
		<div class="one2"></div>
	</div>
	<div class="two"></div>
</body>
</html>

上面代码显示结果
在这里插入图片描述
one1和one2为one的自己元素，但是因为one1和one2加了浮动，所以不能撑开one，并且two也顶上来了。

解决

方式一：对于子元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one {
			width: 500px;
			border: 1px  solid red;
		}
		.one1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.one2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
		/* 添加样式 */
		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="one1"></div>
		<div class="one2"></div>
		<div class="clear"></div>  <!-- 添加一个标签 -->
	</div>
	<div class="two"></div>
</body>
</html>

在这里插入图片描述

方式二：对于父元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one {
			width: 500px;
			border: 1px  solid red;
			/*给父级添加 overflow 就可以清除浮动*/
			overflow: hidden;
		}
		.one1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.one2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one">
		<div class="one1"></div>
		<div class="one2"></div>
	</div>
	<div class="two"></div>
</body>
</html>

方式三：伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix {
			*zoom: 1;  /*ie6,7 清除浮动的样式*/
		}
		.one {
			width: 500px;
			border: 1px  solid red;
			/*给父级添加 overflow 就可以清除浮动*/
			overflow: hidden;
		}
		.one1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.one2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
<div class="one clearfix">
	<div class="one1"></div>
		<div class="one2"></div>
	</div>
	<div class="two"></div>
</body>
</html>

方式四：双伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		.one {
			width: 500px;
			border: 1px  solid red;
			/*给父级添加 overflow 就可以清除浮动*/
			overflow: hidden;
		}
		.one1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.one2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
<div class="one clearfix">
	<div class="one1"></div>
	<div class="one2"></div>
</div>
<div class="two"></div>
</body>
</html>