课程
/前端开发
/HTML/CSS
/网页简单布局之结构与表现原则
老师的代码中overflow:hidden在该处具体是什么意义。为什么删掉之后下面的就会跑上去。
2015-07-24
源自:网页简单布局之结构与表现原则 2-1
正在回答
我在慕课看过一节课讲的就是overflow:hidden的用法。具体内容如下:
1、可以将溢出的元素隐藏
2、还可以撑起子元素为浮动的父元素。
对于本例来说,你可以在本地打一下该代码,并为.demo01加一个border属性,就会发现该父元素的高度没有被撑起,border显示为一条线。因为它的子元素都浮动了,这样就可以使用overflow:hidden的第二种用法来解决这个问题了。
里面没有讲overflow:hidden为什么可以撑开父元素,只讲了可以这样用。希望可以帮到你
补充:overflow:hidden为什么可以撑开父元素?
根据百度到的:float(浮动)这个词的含义,不仅是平面的,更是立体的浮动,3D的,Z轴也有。
当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。
overflow是隐藏超出这个盒子的内容,本来内容超出盒子,下面的元素自然在下面。
你写上了这个属性,下面的就会排上来。
哎哟22 提问者
iyric 回复 哎哟22 提问者
举报
入门必杀技之结构与表现相分离,课程会有3个案例,不同角度讲解