在html中通过使用css解决高度塌陷问题

        

目录

                                1. 我们先写两个盒子用来演示

                        ​​​​​​​         2.接下来我们开始演示

           解决方法：

                        1.给父元素添加一个固定的高度

                        2.给父元素添加一个overflow: hidden; 

                       3.在父元素里最后添加一个空的块元素

                        4.设置 父元素：after

---

        首先，先给大家看一下高度塌陷的效果

               1. 我们先写两个盒子用来演示

         2.接下来我们开始演示

大家可以看见当我给两个div分别设置浮动时，最大的盒子消失不见了 ，但宽度还在，接下来我给最大div盒子加一个边框给大家看

 

         结论：当一个盒子里所有的子元素都设置了浮动时，那么他们的父元素盒子就会出现高度塌陷的效果。且父元素没有设置固定的高度！！！！

           解决方法：

                        1.给父元素添加一个固定的高度

        由此可见，这样设置效果图就出来了，但这个方法有一个缺点就是父元素设置了一个固定的宽高，但这样在后续我们进行修改时就很不方便了，并且也会影响布局，在写项目时不推荐使 用

                2.给父元素添加一个overflow: hidden; 

 由此可见，设置overflow: hidden; 也可以解决，但这个方法也有一个缺点下方给大家演示

        

	
		
		
		
		
		
	

	
		

			

				
aaa
			
			

		
	

 这里我给第一个.first的div里在加一个div，并且设marfin-top为80px

                 接下来我们把80改成100

	
		
		
		
		
		
	

	
		

			

				
aaa
			
			

		
	

 这样大家可以看见，小盒子消失了，这个是因为最大盒子设置了overflow：hodder，所有就会导致出现这种情况，这种情况在我们写下拉框时会遇到

               3.在父元素里最后添加一个空的块元素

 

         这里同样可以实现效果，但记着要给最后一个盒子设置一个清除浮动，但这个方法的缺点就是会使代码多余，不够美观

        4.设置 父元素：after

大家可以看见我给父元素添加了一个结束伪类

#bodys:after {
                content: "";
                clear: both;
                display: block;
            }

这样就也可以解决高度塌陷的问题，这个方法是推荐使用的

                        以上就是本人目前掌握的解决高度塌陷的方法，如果有更好的方法或者错误之处欢迎告知