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. 苏浪浪 201771010120《面向对象程序设计(java)》第八周学习总结

    1.实验目的与要求 (1) 掌握接口定义方法: (2) 掌握实现接口类的定义要求: (3) 掌握实现了接口类的使用要求: (4) 掌握程序回调设计模式: (5) 掌握Comparator接口用法: ( ...

  2. CF918C The Monster

    题目链接:http://codeforces.com/contest/918/problem/C 知识点: 贪心 解题思路: 枚举起点(当起点就是\(')'\)时直接跳过)并在此基础上遍历字符串,用一 ...

  3. MySql 语言分类

    (1)数据定义语言,即SQL DDL,用于定义SQL模式.基本表.视图.索引等结构.(2)数据操纵语言,即SQL DML.数据操纵分成数据查询和数据更新两类.(3)数据查询语言,即SQL DQL.(4 ...

  4. Html响应式图片

    Html响应式图片 1.介绍:根据屏幕匹配的不同尺寸显示不同图片,picture 元素允许我们在不同的设备上显示不同的图片,一般用于响应式 <!-- 在不同的屏幕尺度下显示不同的图片 --> ...

  5. ATX-UI自动化环境搭建

    基础环境准备(以下都是在Mac机上搭建的) 1.android sdk安装&配置 很完美的一个资源下载网:tools.android-studio.org,下载所需的包(我下的zip包直接解压 ...

  6. vue中 vue-awesome-swiper的使用

    在页面开发中,经常会碰到需要轮播,滑动等需求,特别是多元素滑动,此时,要么自己写,要么网上找轮子,不过自己写,其实还是有点难度的,一般就是网上找写好的库,本文就是针对vue-awesome-swipe ...

  7. 如何同时关联多个远程仓库,实现一次 push 多站提交(github + gitee)

    这两天做了简陋轮子,主要想放到npm上, Github: canvas-components Gitee: canvas-components github 上一份,gitee 上一份.(走过路过,s ...

  8. [Chrome插件开发]001.入门

    Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...

  9. Sniffer截包工具的使用

    Sniffer软件的安装 sniffer需要在xp或者win2003环境下才能正常运行,如果没有这两个系统,可以安装虚拟机,在虚拟机上使用sniffer.如果没有这两个系统就会出现找不到网卡或者打不开 ...

  10. 使用 Typora 编辑器运用 Markdown 的语法编写文档

    Markdown 介绍 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. ...