【响应式Web前端设计】css中:overflow:hidden解决塌陷

overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏。

1.我们给一个父元素,里面有两个子元素

在这里插入图片描述
2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左浮动。

在这里插入图片描述
3.运行结果如下:我们发现父元素的背景色并没有显示出来
在这里插入图片描述
4.给父元素加上overflow:hidden
在这里插入图片描述

5.运行结果:父元素的背景色被显示出来

在这里插入图片描述
当子元素浮动时,它的父元素不是不在了,因为父元素的高height:auto为自动值,就是根据里面的内容自动设置高度,由于子元素设置了左浮动,已经浮动起来了属于浮动流,不在普通流中,因此父元素普通流中的内容为空,所以没有高度。解决方法就为给浮动块的父元素设置overflow:hidden;当然还有其他方法,这个最为简便。

7.w3school中解释如下,简单的说overflow:hidden的意思就是超出部分隐藏
在这里插入图片描述

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值