完整clearfix，解决父子高度塌陷，外边距重叠问题

最新推荐文章于 2023-01-16 22:20:33 发布

jay编程

最新推荐文章于 2023-01-16 22:20:33 发布

阅读量389

点赞数

分类专栏： javaWeb # html # css

本文链接：https://blog.csdn.net/weixin_45986454/article/details/106574085

版权

javaWeb 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

标题：完整clearfix，解决父子高度塌陷，外边距重叠问题

一、父子元素外边距重叠，当子元素需向下移时，会发生父子一起移动的问题。

解决方案：

	   /*添加伪元素*/
	   .box2:before{
	        content:"";
	        display:table;
	    }

二、父元素未设置高度，被子元素撑开。当子类脱离文档流，没有了位置，导致下面的元素都跑上来了，出现界面混乱问题。

解决方案:

      .box1:after{
             content:"";
             display:block;
             clear:both;
       }

三、总方案，使用与两者情形

         .clearfix:after,
         .clearfix:before{
             content:"";
             display:table;
             clear:both;
         }

完整代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			完整clearfix，解决父子高度塌陷，外边距重叠问题
		</title>	
		<style type="text/css">
		    /*显示父元素包围子元素  父子元素外边距重叠*/
         .box2{
		        width:200px;
		        height:200px;
		        background-color:yellow;
		    }
         .box21{
             width:100px;
             height:100px;
             background-color:purple;
             /*此时子元素向下移动：发生问题，解决措施：改变相邻，改变垂直*/
             margin-top:100px;
         } 
					    
			   /*添加伪元素*/
	/* 		.box2:before{
		        content:"";
		        display:table;
		    } */	
			/*显示的图形，父元素被子元素撑开了，若没有写边界，则显示的图像会看起来很怪*/
		   .box1{
		        /* width:200px; */
		        /* background-color:orange; */
		        border:5px red solid;
		    }
					    
         .box11{
             width:100px;
             height:100px;
             background-color:purple;
             /*子类脱离文档流， 没有了位置，导致下面的元素都跑上来了*/
             /*解决措施：开启bfc  */
             float:left;
         }  
/*       .box1:after{
             content:"";
             display:block;
             clear:both;
         } */
         
         .clearfix:after,
         .clearfix:before{
             content:"";
             display:table;
             clear:both;
         }
         /*适用于ie6*/
         .clearfix{
             zoom:1;
         }

         .box3{
             width:300px;
             height:300px;
             background-color:pink;
         }
         
	  </style>						
	</head>
	<body>	
		<p>显示父元素包围子元素</p>
	     <div class="box2 clearfix">  
	         <!-- <div>a</div> --><!-- 可以成功，不过有个a -->
	         <!-- <div></div> --><!-- 加空的div不行 -->
	         
	         <!-- <table></table> --><!--  加空的table可以-->
	         <div class="box21">
	         </div>
	     </div>
	     <br/>		<br/>		<br/>		<br/>		<br/>		<br/>		<br/>
	     <p>显示的图形，父元素被子元素撑开了，若没有写边界，则显示的图像会看起来很怪</p>
	     <div class="box1 clearfix">  
	         <div class="box11">
	         </div>
	     </div>
	     <div class="box3"></div>
		<img src="magazine-unlock-hi1057703.jpg" width="300"  alt="周杰伦"/><br/>			
				
		</body>
</html>

在这里插入图片描述

jay编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
完整clearfix，解决父子高度塌陷，外边距重叠问题

标题：完整clearfix，解决父子高度塌陷，外边距重叠问题一、父子元素外边距重叠，当子元素需向下移时，会发生父子一起移动的问题。解决方案： /*添加伪元素*/ .box2:before{ content:""; display:table; } 二、父元素未设置高度，被子元素撑开。当子类脱离文档流，没有了位置，导致下面的元素都跑上来了，出现界面混乱问题。解决方案: .box1:after{ co
复制链接

扫一扫