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

对卦卦上心

于 2022-07-29 23:16:33 发布

阅读量1.1k

点赞数 3

分类专栏： it web前端 css 文章标签： CSS 浮动高度塌陷解决方案布局

本文链接：https://blog.csdn.net/liu0218/article/details/126065338

版权

web前端同时被 3 个专栏收录

46 篇文章 2 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

1.概念：

2.示例：

3.解决办法

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

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

3.3给父级元素添加overflow属性

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

3.5 用伪元素after清除浮动

1.概念：

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

2.示例：

    //CSS样式
    <style>
        div{
            width: 450px;
            background-color: pink;
        }
        div>.box01{
            width: 200px;
            height: 200px;
            float: left;
            background-color: blue;
        }
    </style>

   //结构 
    <body>
        <div>
            <div class="box01"></div>
            <div class="box01"></div>
            <div class="box01"></div>
        </div>
    </body>

3.解决办法

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

<div class="fater" style="height:200px ;weight:200px">父盒子
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
</div>

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

<div class="fater" style="float:left ;">父盒子
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
</div>

3.3给父级元素添加overflow属性

<div class="fater" style="overflow: hidden ;">父盒子
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
</div>


或


<div class="fater" style="overflow: auto ;">父盒子
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
</div>


或


<div class="fater" style="overflow: scroll;">父盒子
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
        <div class="son">子盒子</div>
</div>

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

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

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

   <div class="d1">父盒子
        <div class="d2">子盒子</div>
        <div style="clear: both;"></div>  <!--清除浮动块-->
    </div>

3.5 用伪元素after清除浮动

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

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