深入理解:overflow:hidden——溢出,坍塌,清除浮动
深入理解: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嵌套——父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:hidden属性用以清除浮动
.container{background-color: black;overflow:hidden;}复制代码
这时的效果如图所示:
总结:
(1)(2)一个使用了都浮动的战略,一个使用了清除浮动的战略使父div宽容的接受了子div,两者的区别在于都浮动需要额外设定父div的宽度,因为浮动起来的div失去了div独占一行的特性,而清除浮动的父div仍然霸道。
3.解除坍塌
可以使用overflow:hidden解除margin坍塌,当然了,坍塌是不分父div的高度是否固定的
首先要知道什么叫做坍塌:
我们为div1添加一个属性:margin-top:50px,我们想象中效果是这样的:
但实际上是这样的(这是开发人员工具下的效果):
可以看出,div1的上端距离浏览器的顶部有50px而不是对它的父div,更可怕的是它甚至向下顶了它的父div,这就是坍塌。这里多说一句:这种坍塌只针对于父亲的第一个儿子,div2设置margin-top:50px则不会有任何不妥。
(1)我们可以为父div添加overflow:hidden解决这个问题:
.container{background-color: black;overflow: hidden;}复制代码
效果如图所示:
(2)会思考的读者一定会考虑浮动能不能解决这个烦人的问题,这里为了排除overflow:hidden对未定高度的父div的影响,我们为父div设置一个高度:
.container{background-color: black;height: 200px;}复制代码
我们为所有子div添加一个浮动属性(比如float:left),显而易见,只要是浮动的子div就会完全避免坍塌的问题(PS:无论父div是否浮动):
总结
可以使用overflow:hidden来解除坍塌,浮动的div根本不用考虑坍塌。
4.总结
overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。
转载地址来自 blog.csdn.net/hukaihe/art…
深入理解:overflow:hidden——溢出,坍塌,清除浮动相关推荐
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
- 理解overflow:hidden
overflow:hidden意为清除浮动 主要有三个作用 第一隐藏溢出 当div中的文字超出了div的容量,加上overflow:hidden;超出容量的文字,便不再显示 第二清除浮动 父div中有 ...
- overflow:hidden的另一层含义
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
- overflow:hidden属性
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
- overflow:hidden的使用
一.溢出隐藏 如果某一元素内容超过所给定的宽高,就会溢出. <style type="text/css">.box{background-color: lightblu ...
- css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
- css清除浮动的方法及原因
清除浮动的方法及原因 为什么要清除浮动 清除浮动的方法 方法1:为父元素设置高度 方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法 方法4:给父元素设置overflow: ...
- 浮动(浮动和清除浮动)
一.浮动的基本属性 1.属性名:float 2.取值:left,right 3.作用:让垂直布局的盒子变成水平布局,如:一个在左,一个在右 二.浮动的特点: (1)浮动元素会脱离标准流(简称:脱标), ...
- css浮动、清除浮动和定位
目录 1.浮动 float 2.清除浮动 3.定位 1.浮动 float float:none默认值 不浮动 left左浮动 right 右浮动 一般情况下,容器元素都是独占一行的,如图: ...
最新文章
- 如何将数据库的数据导入到csv文件中
- python使用笔记:if __name__ == ‘__main__‘ 如何理解
- linux multipath简介配置 存储设备故障 负载均衡 虚拟化工具
- 自制服务器语言,修改系统语言,NTF服务器
- 微服务实践沙龙-上海站
- spring ioc原理
- linux文件属性是什么意思,Linux文件属性
- lightgbm原理_LightGBM 原理及参数学习
- 用计算机演银河系,专家首次用计算机模拟类银河星系 分辨率极高
- 暴风集团:9月21日起公司股票交易进入退市整理期
- ListView的使用,PopupWindow菜单栏的使用android
- 用VIM编写C/C++程序
- DevOps:软件架构师行动指南DevOps:软件架构师行动指南2.3 独特的云特性对DevOps的影响...
- H3CSE20200603班-SSL V*N
- 基于灰狼优化算法的线性规划问题求解matlab程序
- (转)Windows gcc(MinGW32)配置-慢!!!
- 《股市稳赚》书中的精髓:用简单的神奇公式进行股票投资,获得稳定而持久的收益。
- 你的死工资,正在拖垮你一辈子需要花多少钱
- 使用随机森林填补缺失值
- Arduino+OLED基础保姆级教程(1)