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

20 篇文章 0 订阅
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的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,推荐使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对卦卦上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值