清除浮动的方法

最新推荐文章于 2024-04-29 16:58:49 发布

黄晶谛

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量63

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/116724299

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、通过标签清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father {
			width: 300px;
			border: 1px solid red;
		}

		.big {
			width: 100px;
			height: 200px;
			background-color: purple;
			float: left;
		}
		.small {
			width: 80px;
			height: 80px;
			background-color: blue;
			float: left;
		}
		.footer {
			width: 400px;
			height: 100px;
			background-color: pink;
		}

		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
		<div class="clear"></div> <!-- 在最后一个浮动标签之后，新添加一个标签 ，用于清除浮动 -->
	</div>
	<div class="footer"></div>
</body>
</html>

二、在父容器中利用overflow属性清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father {
			width: 300px;
			border: 1px solid red;
			overflow: hidden; /* 在父容器添加overflow */
		}

		.big {
			width: 100px;
			height: 500px;
			background-color: purple;
			float: left;
		}
		.small {
			width: 80px;
			height: 80px;
			background-color: blue;
			float: left;
		}
		.footer {
			width: 400px;
			height: 100px;
			background-color: pink;
		}

	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

三、通过after伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.clearfix {
			*zoom: 1;  /* IE6 IE7专用识别 */
		}

		.clearfix:after { /* 正常浏览器清除浮动 */
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.father {
			width: 300px;
			border: 1px solid red;
		}

		.big {
			width: 100px;
			height: 500px;
			background-color: purple;
			float: left;
		}
		.small {
			width: 80px;
			height: 80px;
			background-color: blue;
			float: left;
		}
		.footer {
			width: 400px;
			height: 100px;
			background-color: pink;
		}

	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 双伪元素清除浮动 start */
		.clearfix:before, .clearfix:after {
			content: "";
			display: table;
		}

		.clearfix:after {
			clear: both;
		}

		.clearfix {
			*zoom: 1;
		}
		/* 双伪元素清除浮动 end */

		.father {
			width: 300px;
			border: 1px solid red;
		}

		.big {
			width: 100px;
			height: 500px;
			background-color: purple;
			float: left;
		}
		.small {
			width: 80px;
			height: 80px;
			background-color: blue;
			float: left;
		}
		.footer {
			width: 400px;
			height: 100px;
			background-color: pink;
		}

	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

黄晶谛

关注

0
点赞
踩
0

收藏

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

一、通过标签清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father { width: 300px; border: 1px solid red; } .big { width: 100px;
复制链接

扫一扫

专栏目录