margin_top塌陷和清除浮动

最新推荐文章于 2022-07-21 20:57:13 发布

IT-Xu_LongTeng

最新推荐文章于 2022-07-21 20:57:13 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/weixin_44269204/article/details/88703166

版权

margin_top塌陷问题
产生:一个元素中含有一个子元素,给子元素添加margin-top时,会发现将设置的值添加给父元素,导致子元素设置margin-top失效
解决方案：
(1)给父元素加overflow:hidden;
(2)给父元素加border边框
(3) 伪元素before

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div_01{
				height: 400px;
				width: 200px;
				background: red;
				/*第一种解决方法*/
				/*overflow: hidden;*/
				/*第二种设置方法*/
				/*border: 1px solid black;*/
			}
			/*伪元素第三种解决方法*/
			.div_01:before{
				content: "";
				display: table;
			}
			.div_02{
				height: 100px;
				width: 100px;
				background: yellow;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<!--产生：一个元素中含有一个子元素，给子元素添加margin_top时，
		会发现将设置的值添加给父元素，导致子元素设置的margin-top实效。-->
		<div class="div_01">
			<div class="div_02"></div>
		</div>
	</body>
</html>

清除浮动
(1).父级上增加属性 overflow：hidden
(2).在最后一个子元素的后面加一个空的 div,给它样式属性 clear:both（不推荐）
(3).伪对象选择器:
以下的属性content必须和after以及before使用,
父元素::after,父元素before{
content:’’;
display:table;//这是一种以css布局呈现的属性设置具备表格划分的特性以及表格属性//

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>	
		<style type="text/css">
			li{
				float: left;
			}
			ul{
				border: 2px solid red;
				/*此属性具有清除浮动的功效*/
				/*overflow: hidden;*/
			}
			/*推荐使用清除浮动的方式*/
			ul:after,ul:before{
				content: '';
				display: table;
			}
			ul:after{
				clear: both;
			}
			/*div{*/
				/*不推荐使用这种*/
				/*clear: both;
			}*/		
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">网站导航</a></li>
			<li><a href="#">苏宁易购</a></li>
			<li><a href="#">客户服务</a></li>
			<!--<div></div>-->
		</ul>
	</body>
</html>