CSS学习:overflow:hidden解决溢出,坍塌,清除浮动
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清除浮动.
.container{ background-color: black; overflow:hidden;}
总结:
(方案一和方案二)一个使用了都浮动的战略,一个使用了清除浮动的战略使父div宽容的接受了子div,两者的区别在于都浮动需要额外设定父div的宽度,因为浮动起来的div失去了div独占一行的特性,而清除浮动的父div仍然霸道。
C.解除坍塌
但实际上是这样的(这是开发人员工具下的效果):
解决父子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解决溢出,坍塌,清除浮动的更多相关文章
- CSS那些事儿-阅读随笔3(清除浮动)
浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
- 转:css中overflow:hidden 不起作用了吗?
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- CSS 的overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
随机推荐
- 去重函数unique,sort,erase的应用
std::unique 一.总述 unique函数属于STL中比较常用函数,它的功能是元素去重.即"删除"序列中所有相邻的重复元素(只保留一个).此处的删除,并不 是真的删除,而是 ...
- 【转载】win10应用商店独立安装包(一键安装) 2020最新版官方正式版
win10应用商店独立安装包(一键安装) 2020最新版官方正式版 Win10 LTSB 2016 / LTSC 2019系统,没有应用商店 需要下载应用商店安装包 蓝盘:https://www.la ...
- 图像分析之梯度L0范数平滑
本文是Image Smoothing via L0 Gradient Minimization一文的笔记.L0 Gradient Smoothing的formulation与TV和WLS等基于变分的模 ...
- wordpress获取文章特色图像路径函数wp_get_attachment_image_src()
特色图像是wordpress主要的文章缩略图功能,几乎全部wordpress模板都使用或支持特色图像.今天介绍的wp_get_attachment_image_src()函数就是获取文章特色图像路径的 ...
- getcomputedstyle和style的区别
1.只读与可写getComputedStyle方法是只读的,只能获取样式,不能设置:而element.style能读能写,能屈能伸.2.获取的对象范围getComputedStyle方法获取的是最终应 ...
- 虚拟机配置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 ...
- Unity读取StreamingAssets路径下的文件
/// <summary> ///读取StreamingAssets中的文件 /// </summary> /// <param name="path" ...
- 读-写锁 ReadWriteLock & 线程八锁
读-写锁 ReadWriteLock: ①ReadWriteLock 维护了一对相关的锁,一个用于只读操作, 另一个用于写入操作. 只要没有 writer,读取锁可以由 多个 reader 线程同时保 ...
- TechEmpower Web 框架性能第19轮测试结果正式发布,ASP.NET Core在主流框架中拔得头筹
TechEmpower 第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客:https://www.techempower.com/blog/2020/05/28/framewo ...
- XXE漏洞学习1
1.test.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ANY [ <! ...