clearfix 解决高度塌陷

最新推荐文章于 2022-09-06 16:24:55 发布

数数huhu

最新推荐文章于 2022-09-06 16:24:55 发布

阅读量252

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_51942661/article/details/117933625

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		.box1{
			width: 300px;
			height: 300px;
			background-color: #008000;
			/* padding-top: 1px; */	
		}
		
		.box2{
			width: 200px;
			height: 200px;
			background-color: #8A2BE2;
			margin-top: 100px;/*父子元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素*/
		}
		
		/* 解决父子外边距重叠问题 */	
		.box1:before{
			content: "";
			display: table;/* 可将一个元素设置为表格显示 */
		}
		
		.box3{
			border: 10px red solid;
		}
		.box4{
			width: 100px;
			height: 100px;
			background-color: #FFFF00;
			float: left;/*出现父元素高度塌陷*/
		}
		/* 解决父元素高度塌陷问题 */
		.clearfix:after{
			content: "";
			display: block;
			clear: both;
		}
		
		/* 经过修改后的clearfix是一多功能的，机可以解决高度塌陷，又可以确保父元素和子元素的
		 垂直外边距不会重叠*/
		.clearfix:before,.clearfix:after{
			content: "";
			display: table;
			clear: both;
		}
		.clearfix:zoom 1;/*兼容IE6*/
		</style>
	</head>
	<body>
		<div class="box3 clearfix" >
			<div class="box4"></div>
		</div>
		<div class="box1 clearfix">
			<!-- <table></table> --><!-- 使用空的table可隔开父子元素的外边距，阻止外边距的重叠 -->
			<!-- 但是就添加了个没用的结构 -->
			<!-- 可以使用伪类元素选中父元素的最前边元素 -->
			<div class="box2"></div>
		</div>
		
		
	</body>
</html>

数数huhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clearfix 解决高度塌陷

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: #008000; /* padding-top: 1px; */ } .
复制链接

扫一扫