清除浮动

最新推荐文章于 2020-07-27 19:22:05 发布

朱科润

最新推荐文章于 2020-07-27 19:22:05 发布

阅读量70

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44518802/article/details/104015231

版权

额外标签法

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

1.如果清除了浮动,父亲去自动检测孩子的高度以最高的为准
2.最后一个浮动标签的后，新添加一个标签清除浮动
清除浮动前清除浮动后

overflow清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {border:1px solid red;width:300px;overflow:hidden;  
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 180px;
		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>
	.clearfix:after {  /*正常浏览器 清除浮动*/
		content:"";display: block;height: 0;clear: both;visibility: hidden;}
	.clearfix {*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/}
	.father {border: 1px solid red;width: 300px;}
	.big {width: 100px;height: 100px;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>
	.clearfix:before, .clearfix:after {content: "";display: table;}
	.clearfix:after {clear: both;}
	.clearfix {*zoom: 1;}
	.father {border: 1px solid red;width: 300px;}
	.big {width: 100px;height: 100px;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> .father {border:1px solid red;width:300px;} .big {wi...
复制链接

扫一扫