文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

2024-04-02 19:55

关注

这篇文章主要为大家展示了“CSS中overflow:hidden如何实现溢出,坍塌,清除浮动”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中overflow:hidden如何实现溢出,坍塌,清除浮动”这篇文章吧。

overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章,我相信你绝对能对overflow:hidden的用法熟练掌握。

下面的代码将作为基本演示代码,每次讲解一个新的作用,我们都要将代码恢复成下面这个样子:

CSS样式:

.container{
      background-color: black;
           }

.div1{
      background-color: aqua;
      width: 100px;
      height: 100px;
      }
.div2{
       background-color: red;
       width: 100px;
       height: 100px;
     }

html内容:

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

程序运行效果:

1.使用overflow:hidden隐藏溢出

当父div拥有固定的高度时,比如height:500px,我们使用overflow:hidden来隐藏溢出。

当使用div+css布局时,会出现很多的div嵌套&mdash;&mdash;父div内嵌套一个或多个的子div,默认情况下,父div的高度是auto&mdash;&mdash;它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度),比如height:500px,那么如果子div的高度超过了这个值,在默认情况下,子div会超出父div的束缚,这就是溢出。我们可以通过设置父div的CSS属性&mdash;&mdash;overflow来对子div进行控制。这里使用overflow:hidden来隐藏子元素溢出的部分。

2.使用overflow:hidden清除浮动

当父元素的高height:auto时,我们使用overflow:hidden清除浮动

当我们为div1和div2加上一个属性:float:left后,我们会发现:背景色为黑色父div消失了,这是因为: 浮动的元素脱离文档元素, 不占据空间。 不浮动的元素会直接无视掉这个元素:父div无视了自己的两个孩子,其高度为0(因为我们没有设置父div的高度),所以父div没有显现。

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

想让父div“宽容的”接受自己的两个孩子有两个办法:

(1) 第一个就是让父亲也浮动起来 ,我们试着给父div添加一个CSS属性:float:right,会发现两个颜色块出现在了屏幕的右边,依然没有父div的身影,然而通过开发人员工具不难看出父div已经包容子div

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

这是因为浮动的div已经失去了其“独霸一行”的能力,我们需要手动为父div设置一个宽度,比如width:500px,之后可以看到:

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

(2)第二种就是 为父亲添加overflow:hidden属性用以清除浮动

.container{ background-color: black; overflow:hidden;}

这时的效果如图所示:

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

总结:

(1)(2)一个使用了都浮动的战略,一个使用了清除浮动的战略使父div宽容的接受了子div,两者的 区别在于都浮动需要额外设定父div的宽度,因为浮动起来的div失去了div独占一行的特性,而清除浮动的父div仍然霸道。

3.解除坍塌

可以使用overflow:hidden解除margin坍塌,当然了,坍塌是不分父div的高度是否固定的

首先要知道什么叫做坍塌:

我们为div1添加一个属性:margin-top:50px,我们想象中效果是这样的:

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

但实际上是这样的(这是开发人员工具下的效果):

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

CSS中存在一个margin collapse,即边界塌陷或者说边界重叠。对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。

但对于父块DIV内含子块DIV的情况,就会按另一条CSS惯例来解释了,那就是:对于有块级子元素的元素(父元素)计算高度的方式,如果元素没有上下边框和填充,那其高度就是第一个子元素顶部和底部边框边缘之间的距离。

结论:

解决父子DIV中顶部margin cllapse的问题,需要给父div设置:

1、边框,当然可以设置边框为透明;

2、为父DIV添加padding,或者至少添加padding-top;

此外,还可以通过over-flow来解决

(1)我们可以为父div添加overflow:hidden解决这个问题:

.container{

background-color: black;

overflow: hidden;

}

效果如图所示:

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动 CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

(2)会思考的读者一定会考虑浮动能不能解决这个烦人的问题,这里为了排除overflow:hidden对未定高度的父div的影响,我们为父div设置一个高度:

.container{

background-color: black;

height: 200px;

}

我们为所有子div添加一个浮动属性(比如float:left),显而易见,只要是浮动的子div就会完全避免坍塌的问题(PS:无论父div是否浮动):

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

CSS中overflow:hidden如何实现溢出,坍塌,清除浮动

可以使用overflow:hidden来解除坍塌,浮动的div根本不用考虑坍塌。

以上是“CSS中overflow:hidden如何实现溢出,坍塌,清除浮动”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯