解决高度塌陷问题（非BFC解决方式）

最新推荐文章于 2023-04-10 16:57:09 发布

Miketutu

最新推荐文章于 2023-04-10 16:57:09 发布

阅读量321

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Miketutu/article/details/127561840

版权

高度塌陷：

1.在文档流中，如果没有设置宽度，则父元素的宽度为auto，父元素高度由内容撑开。

2.如果父元素塌陷，则父元素下的兄弟元素会上移，导致页面布局混乱。

3.当子元素设置浮动，则子元素脱离文档流，此时子元素无法撑开父元素，导致父元素高度塌陷。

解决方案：

（1）设置父元素高度；特点：简单，但设置高度会减少其扩展性；

（2）空div + 清除浮动；特点：简单，但设置空div会导致代码冗余

（3）给父元素设置overflow：hidden; 特点：简单，下拉列表框场景不建议使用；

（4）伪类：after 来解决高度塌陷；特点：副作用小，推荐使用；

具体操作：

方法一：设置父元素高度；

<head>
  
   <style>
    
    #father{

        border:1px soild red;     
        height:100px;
  }
    
   .layer01 {
            border: 1px #F00 dashed;
            float: left;
        }

        .layer02 {
            border: 1px #00F dashed;
            float: right;
        }

        .layer03 {
            border: 1px #060 dashed;
            float: left;
        }

        .layer04 {
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            width: 200px;
            float: left;
        }
</style>
<body>
  
   <div id:father> 

    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">  </div>

   </div>

</body>

方法二：空div +清除浮动

head>
  
   <style>
    
    #father{

        border:1px soild red;     
        
  }
    
   .layer01 {
            border: 1px #F00 dashed;
            float: left;
        }

        .layer02 {
            border: 1px #00F dashed;
            float: right;
        }

        .layer03 {
            border: 1px #060 dashed;
            float: left;
        }

        .layer04 {
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            width: 200px;
            float: left;
        }

        //设置空div清除浮动
        .clear{
               clear:both;
         }
</style>
<body>
  
   <div id:father> 

    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">  </div>

    <div class="clear">  </div>

   </div>

</body>

方法三：给父元素设置overflow：hidden来解决问题

<head>
  
   <style>
    
    #father{

        border:1px soild red;     
        
         overflow:hidden;
  }
    
   .layer01 {
            border: 1px #F00 dashed;
            float: left;
        }

        .layer02 {
            border: 1px #00F dashed;
            float: right;
        }

        .layer03 {
            border: 1px #060 dashed;
            float: left;
        }

        .layer04 {
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            width: 200px;
            float: left;
        }
</style>
<body>
  
   <div id:father> 

    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">  </div>

   </div>

</body>

方法四：使用自定义伪类，设置给父元素；

<head>
  
   <style>
    
    #father :after{

        border:1px soild red;  
        content: ""  ///*在father后面添加内容为空*/

        display:block; //把添加的内容转化为块元素
        clear:both;  //清除这个元素两边的浮动
           
  }
    
   .layer01 {
            border: 1px #F00 dashed;
            float: left;
        }

        .layer02 {
            border: 1px #00F dashed;
            float: right;
        }

        .layer03 {
            border: 1px #060 dashed;
            float: left;
        }

        .layer04 {
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            width: 200px;
            float: left;
        }
</style>
<body>
  
   <div id:father> 

    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">  </div>

   </div>

</body>