A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

明名李

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 明名李 初级黑马   /  2019-3-18 15:35  /  728 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

2.使用overflow:hidden清除浮动
当父元素的高height:auto时,我们使用overflow:hidden清除浮动
当我们为div1和div2加上一个属性:float:left后,我们会发现:背景色为黑色父div消失了,这是因为: 浮动的元素脱离文档元素, 不占据空间。 不浮动的元素会直接无视掉这个元素:父div无视了自己的两个孩子,其高度为0(因为我们没有设置父div的高度),所以父div没有显现。
想让父div“宽容的”接受自己的两个孩子有两个办法:
(1)第一个就是让父亲也浮动起来,我们试着给父div添加一个CSS属性:float:right,会发现两个颜色块出现在了屏幕的右边,依然没有父div的身影,然而通过开发人员工具不难看出父div已经包容子div
这是因为浮动的div已经失去了其“独霸一行”的能力,我们需要手动为父div设置一个宽度,比如width:500px
2,可以对父盒子用overflow,他的盒子宽度是随着纸盒子自动调节的
3.解除坍塌

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

overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马