005clearfix

最新推荐文章于 2022-11-07 23:44:34 发布

Manta__

最新推荐文章于 2022-11-07 23:44:34 发布

阅读量107

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104547602

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

使用空table标签隔离父子元素的外边距，阻止外边距重叠.以及高度塌陷

<!DOCTYPE html>
<html>
 <head>
 	 <meta charset="utf-8">
  	<title>ceshi</title>
 	 <style type="text/css">
  		 .b1{
  			  width: 200px;
  			  height: 200px;
  			  background-color: #bfa;
 		  }
 		  .b2{
  			  width: 100px;
 			   height: 100px;
  			  background-color: yellow;
   			 margin-top: 100px;
 		  }
  		 .b3{
  			  border: 1px solid;
 		  }
  		 .b4{
   			 width: 100px;
  			  height: 100px;
  			  background-color: #2e5bff;
  			  float:left;
  		 }
  		 /*.b1:before{解决父元素重叠
  			  content: "";
  			  display: table;
 		  }
  		 .clearfix:after{解决高度塌陷
  			  content: "";
  			  display: table;
 			   clear:both;
 		  }*/
 		  .clearfix:before,
  		 .clearfix:after{/*解决子父外边距重叠及高度塌陷问题*/
  				  content: "";
   				 display: table;
  				  clear: both;
 			  }
	  </style>
 </head>
 
 <body>
 	 <div class="b3 clearfix">
  		 <div class="b4"></div>
 	 </div>
 	 <div class="b1 clearfix">
  		 <div class="b2"></div>
 	 </div>
  
 </body>
</html>