float导致的父元素高度塌陷——带例说明+解决方法

最新推荐文章于 2024-03-20 17:44:36 发布

GaHin_

最新推荐文章于 2024-03-20 17:44:36 发布

阅读量1.9k

点赞数 2

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_44066534/article/details/107133440

版权

今天来讲讲float导致的父元素高度塌陷的解决方法。
之前讲过absolute导致的高度塌陷问题，需要的同学请移步至此文章：添加链接描述

什么是高度塌陷？
在文档流中，当父元素的高度设置为自适应的时候（height：auto），此时父元素的高度默认会被子元素撑开。但是当为我们子元素设置浮动（float）以后，子元素就会完全脱离文档流，导致子元素无法撑开父元素高度的情况出现。

高度塌陷会出现什么问题？
由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，从而导致页面的布局混乱。

接下来看一个float导致父元素高度塌陷的小例子👇
正常代码：

<html>
    <head>
        <style>
            .container{
                width: 300px;
                height: auto;
                background: rgb(54, 181, 219);
				position: relative;
            }
            .box{
                width: 200px;
                height: 200px;
                border: 2px solid rgb(247, 129, 129);
            }
        </style>
    </head>
    <body>
        <div class="container" >
            <div class="box"></div>
        </div>
    </body>
</html>

代码结果：父元素(蓝色背景）高度被子元素（红色边框）高度撑起
在这里插入图片描述
问题出现：当给子元素box添加了 float：left；属性后。
结果：原本为蓝色背景的父元素container高度发生了塌陷变成0。

那么高度塌陷问题该怎么解决呢？接着看👇

常见的高度塌陷问题的解决方法

给父元素添加固定高度。
（缺点：添加了固定高度的父元素高度不再自适应）
给父元素添加属性overflow: hidden;
（缺点：当子元素有定位属性时,容器以外的部分会被裁剪掉)
在子元素的末尾添加一个高度为0的空白 div来清除浮动属性。
（缺点：在页面中添加无意义的div会造成代码冗余）

//代码结构如下
<body>
     <div class="father" >
         <div class="son"></div>
         //清除浮动属性的div
         <div style="clear: both;"></div>
    </div>
</body>

给父元素中添加一个伪元素。

 .父元素:after{
                 content: "";
                 height: 0;
                 clear: both;
                 overflow: hidden;
                 display: block;
                 visibility: hidden;
            }