CSS子元素设置浮动(float)时父元素高度塌陷问题及解决方法

目录

1.概念：

2.示例：

3.解决办法

3.1每个盒子设定固定的width和height,这个方法是最简单的。

3.2给外部的父级元素页添加浮动

3.3给父级元素添加overflow属性

3.4 在父元素的最下面添加一个元素并设置clear:both样式

3.5 用伪元素after清除浮动

---

1.概念：

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），当父元素没有给定高度时，并且父元素中又没有其它非浮动的元素时，父盒子的高度就会直接塌陷为零， 我们称这是高度塌陷。

2.示例：

    //CSS样式
    

   //结构 
    
        

            

            

            

        
    

3.解决办法

3.1每个盒子设定固定的width和height,这个方法是最简单的。

父盒子
        
子盒子
        
子盒子
        
子盒子

3.2给外部的父级元素页添加浮动

父盒子
        
子盒子
        
子盒子
        
子盒子

3.3给父级元素添加overflow属性

父盒子
        
子盒子
        
子盒子
        
子盒子



或


父盒子
        
子盒子
        
子盒子
        
子盒子



或


父盒子
        
子盒子
        
子盒子
        
子盒子

 其中用到了overflow的hidden、auto、scroll值

• hidden：溢出隐藏
• auto：当文字溢出时会产生滚动条
• scroll：滚动条无论是否溢出都会显示，很不美观

3.4 在父元素的最下面添加一个元素并设置clear:both样式

   
父盒子
        
子盒子
        
  
    

3.5 用伪元素after清除浮动

  .box01:after{
            content: "";  
            display: block; 
            height: 0;
            clear: both;
            visibility: hidden;
       } 

这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用！