margin_top塌陷和清除浮动

小鱼儿 2022-03-02 17:36 271阅读 0赞

**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>
    		
    		<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>
    			
    		</ul>
    	</body>
    </html>