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. 去重函数unique,sort,erase的应用

    std::unique 一.总述 unique函数属于STL中比较常用函数,它的功能是元素去重.即"删除"序列中所有相邻的重复元素(只保留一个).此处的删除,并不 是真的删除,而是 ...

  2. 【转载】win10应用商店独立安装包(一键安装) 2020最新版官方正式版

    win10应用商店独立安装包(一键安装) 2020最新版官方正式版 Win10 LTSB 2016 / LTSC 2019系统,没有应用商店 需要下载应用商店安装包 蓝盘:https://www.la ...

  3. 图像分析之梯度L0范数平滑

    本文是Image Smoothing via L0 Gradient Minimization一文的笔记.L0 Gradient Smoothing的formulation与TV和WLS等基于变分的模 ...

  4. wordpress获取文章特色图像路径函数wp_get_attachment_image_src()

    特色图像是wordpress主要的文章缩略图功能,几乎全部wordpress模板都使用或支持特色图像.今天介绍的wp_get_attachment_image_src()函数就是获取文章特色图像路径的 ...

  5. getcomputedstyle和style的区别

    1.只读与可写getComputedStyle方法是只读的,只能获取样式,不能设置:而element.style能读能写,能屈能伸.2.获取的对象范围getComputedStyle方法获取的是最终应 ...

  6. 虚拟机配置JAVA_HOME

    1.cp home/fan-vm2/es/tools/jdk-8u111-linux-x64.tar.gz usr/java2.tar -zxvf jdk-8u111-linux-x64.tar.gz ...

  7. Unity读取StreamingAssets路径下的文件

    /// <summary> ///读取StreamingAssets中的文件 /// </summary> /// <param name="path" ...

  8. 读-写锁 ReadWriteLock & 线程八锁

    读-写锁 ReadWriteLock: ①ReadWriteLock 维护了一对相关的锁,一个用于只读操作, 另一个用于写入操作. 只要没有 writer,读取锁可以由 多个 reader 线程同时保 ...

  9. TechEmpower Web 框架性能第19轮测试结果正式发布,ASP.NET Core在主流框架中拔得头筹

    TechEmpower 第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客:https://www.techempower.com/blog/2020/05/28/framewo ...

  10. XXE漏洞学习1

    1.test.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ANY [ <! ...