一套完整代码解析高度坍塌的解决方案（最全）

最新推荐文章于 2023-10-12 23:01:42 发布

<阿睿>

最新推荐文章于 2023-10-12 23:01:42 发布

阅读量326

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/qq_45288176/article/details/125380134

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了在网页布局中遇到的父元素高度塌陷问题，当使用float进行元素浮动后，如何通过设置高度、触发BFC、使用清除浮动等方法来避免这种现象。代码示例包括了不同解决方案的实现，如设置父元素高度、使用overflow、添加空div、让最后一个子元素清除浮动以及使用CSS伪元素after结合clear属性。这些方法有助于理解和解决实际开发中的布局问题。

摘要由CSDN通过智能技术生成

一：方案总结

/* 方案1：父元素自设高度 */
               /* height: 100px; */

               /* 方案2：父元素触发BFC结界 */
               /* overflow: hidden; */

                
                

                /* 方案4：让最后一个子元素来清除浮动影响 */
               /* 我后悔了，我不浮动了，我来清除哥哥们浮动对父亲产生的影响 */
               /* 清除左右两个方向子元素浮动对父元素产生的影响 */
               /* clear: both; */

               /* 方案5：让父级也浮动，成为和子级同一层的元素 */
               /* float: left; */

                /*方案6 使用after伪元素结合clear属性解决高度塌陷*/

                .fu::after{
                    content:"";/*在浮动元素的父元素内容区最后加上内容*/
                    display:block;/*默认情况下after所添加的内容为行内元素*/
                    clear:both;/*清除浮动元素影响*/
                }

二：代码解析

原因引入

进行页面布局时，为了能够达到自适应，通常高度是不会进行固定设置的，而使用float进行元素的浮动后，由于没有内容的高度，所以会发生父元素的高度塌陷问题，为了解决此类问题这里给出了几种解决方法。

代码块可直接使用调试（带解析）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>父级高度坍塌问题解决</title>
       <style type="text/css">
           /* 1.给父元素设置边框 */
           .fu {
               border: 5px solid #000;
               /* 方案1：父元素自设高度 */
               /* height: 100px; */
               /* 方案2：父元素触发BFC结界 */
               /* overflow: hidden; */
               /* 方案5：让父级也浮动，成为和子级同一层的元素 */
               /* float: left; */
           }
           /* 2.给父级下的所有div设置大小 */
           .fu > div {
               width: 100px;
               height: 100px;
           }
           /* 3.给5个儿子元素设置不同的背景色 */
           .z1 {
               background-color: rgba(255,0,0,1);
               float: left;
           }
           .z2 {
               background-color: orange;
               float: left;
           }
           .z3 {
               background-color: yellow;
               float: right;
           }
           .z4 {
               background-color: green;
               float: left;
           }
           .z5 {
               background-color: cyan;
               float: left;
               /* 方案4：让最后一个子元素来清除浮动影响 */
               /* 我后悔了，我不浮动了，我来清除哥哥们浮动对父亲产生的影响 */
               /* 清除左右两个方向子元素浮动对父元素产生的影响 */
               /* clear: both; */
           }
           /* 给父元素最后生成一个空白子元素，变块级，清除浮动影响 */
           .clearfix::after {
               content: ''; /* 在父级最后生成一个空白的新的子元素 */
               display: block;
               clear: both;
           }
       </style>
   </head>
   <body>
       <div class="fu clearfix">
           <div class="z1"></div>
           <div class="z2"></div>
           <div class="z3"></div>
           <div class="z4"></div>
           <div class="z5"></div>
           
           
       </div>
   </body>
</html>