overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。

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>

A.父级固定高度,使用overflow:hidden隐藏溢出

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

溢出定义:

当使用div+css布局时,会出现很多的div嵌套——父div内嵌套一个或多个的子div,默认情况下,父div的高度是auto——它可以被子div任意的撑大。

然而父div也可以有固定的高度(或宽度),比如height:500px,那么如果子div的高度超过了这个值,在默认情况下,子div会超出父div的束缚,这就是溢出。

B.父级高height:auto时,使用overflow:hidden清除浮动

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

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

总结:

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

C.解除坍塌

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

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

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;

此外,还可以通过为父div添加overflow:hidden解决这个问题:

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

 


经验:

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

 

CSS学习:overflow:hidden解决溢出,坍塌,清除浮动的更多相关文章

  1. CSS那些事儿-阅读随笔3(清除浮动)

    浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...

  2. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  3. 转:css中overflow:hidden 不起作用了吗?

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  4. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  5. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  6. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  7. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

  8. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  9. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

随机推荐

  1. DRF视图组件

    DRF视图组件: CVB模式继承----五层 from django.views import View # Django的View from rest_framework.views import ...

  2. STM32 Keil 软件仿真设置

    设置 Dialog.DLL 分别为:DARMSTM.DLL和TARMSTM.DLL, Parameter 均为:-pSTM32F103RC,用于设置支持芯片的软硬件仿真

  3. 蓝桥杯 试题 历届试题 对局匹配 DP解决

    问题描述 小明喜欢在一个围棋网站上找别人在线对弈.这个网站上所有注册用户都有一个积分,代表他的围棋水平. 小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起.如果两人分差 ...

  4. XXX_ProductCRUD的项目结构与配置文件

    MVC_ProductCRUD                                                       Hibernate_ProductCRUD 项目结构    ...

  5. Centos7无界面化启动

    Centos7无界面启动: 为了减少系统开销,有时候我们需要无图形界面启动linux(centos7) systemctl set-default multi-user.target (关闭图形界面) ...

  6. C#网络编程入门之UDP

    目录: C#网络编程入门系列包括三篇文章: (一)C#网络编程入门之UDP (二)C#网络编程入门之TCP (三)C#网络编程入门之HTTP 一.概述 UDP和TCP是网络通讯常用的两个传输协议,C# ...

  7. Qt版本中国象棋开发(一)

    开发目的:实现象棋人机对战简单AI,网络对战,移植到android中. 开发平台:windows10 + Qt5.4 for android 开发语言:C++ 开发过程:1.棋盘绘制: 方法一:重写  ...

  8. 深入了解机器学习决策树模型——C4.5算法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第22篇文章,我们继续决策树的话题. 上一篇文章当中介绍了一种最简单构造决策树的方法--ID3算法,也就是每次选择一个特 ...

  9. 基于nodejs+express+mysql+webstorm+html的 增删改查

    一.工具准备 Nodejs框架,WebStorm.Mysql服务.Navicat.此篇文章只讲项目的搭建过程,至于Nodejs,WebStorm.Mysql的下载.安装与配置网上资源很多,请自行查阅, ...

  10. CORS漏洞利用检测和利用方式

    CORS全称Cross-Origin Resource Sharing, 跨域资源共享,是HTML5的一个新特性,已被所有浏览器支持,不同于古老的jsonp只能get请求. 检测方式: 1.curl访 ...