overflow: hidden的用法
overflow: hidden
常用于父元素上。当子元素的内容超过了父元素的大小时,子元素的内容会被修剪。最基本的用法就是溢出隐藏。
overflow属性的基本用法
overflow 属性规定当内容溢出元素框时发生的事情。
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
以下这个例子将说明overflow:hidden
可以解决溢出隐藏和外边距塌陷的问题。
默认情况是overflow:visible
:
<div style="width: 100px; height: 100px; background:blue;"><div style="width: 150px; height: 150px; background: red;
margin-top: 50px; margin-left: 50px;"></div>
</div>
<div style="width: 100px; height: 100px;
margin-top: 20px; background: yellow;"></div>
效果图:
在蓝色的div后加入overflow:hidden
以后,效果图:
在蓝色的div后加入overflow:scroll
之后,效果图:
可以看到:蓝色的父元素内部有子元素,如果给子元素添加margin-top样式,那么父元素也会跟子元素下来,造成外边距塌陷,而overflow:hidden
可以解决这个问题,它可以使子元素的margin-top是相对于父元素的边距,而不是父元素与子元素同时移动产生的边距。
清除浮动
如下代码:
<div style=" background:blue; border: 5px solid; "><div style="width: 150px; height: 200px; background: red; float: left;"></div><div style="width: 300px; height: 100px; background: green; "></div>
</div>
<div style="width: 100px; height: 100px; margin-top: 20px; background: yellow;"></div>
效果图:
在父元素蓝色块加入overflow:hidden
之后的效果图:
由于红色的块是浮动元素,脱离了文档流,导致它的父元素无法包住这个浮动的子元素,但加入overflow:hidden
之后,清除了浮动,使父元素也可以包住浮动元素了。这是因为当给父元素设置``overflow:hidden`时,实际上创建了一个超级属性BFC,由于“BFC布局规则”:计算BFC的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,所以也就实现了清除浮动的目标,所以父元素就包裹住了子元素。
BFC
BFC(Block Formatting Context:块级格式化上下文)就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
BFC布局规则特性:
- 在BFC中,盒子从顶端开始垂直地一个接一个地排列.
- 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
- 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
触发(创建)BFC:
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible。
参考文章:
- 关于overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等等)
- 为什么"overflow:hidden"能清除浮动的影响
- BFC
overflow: hidden的用法相关推荐
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
- overflow:hidden用法
最近学习css的overflow元素的hidden属性,总结2点作用: 1.当父元素设置了height值时,则设置overflow:hidden后,子元素超出父元素部分隐藏 2.当父元素的高度是靠子元 ...
- 论css中如何挣脱overflow:hidden;的限制
前言 这个问题是在处理苏宁平台的官方旗舰店模板遇到的.苏宁限定的页面显示区域宽度为990px.模板可以自定义,但是嵌入的代码被包含在一个div里面.这个div被奇葩的设置了内嵌样式overflow:h ...
- 兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
- overflow:hidden;zoom:1 理解转__
overflow:hidden;zoom:1 http://hi.baidu.com/bbee888/item/ef80baf200de510085d27824 清除浮动的几种方法 1. 投机取巧法 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- jquery 使用animate来改变高度自动添加样式overflow:hidden的问题
Another way is to declare the element as !important in css. For example. .somediv { overflow: visibl ...
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
最新文章
- mysql中日期判断的函数_MySql判断汉字、日期、数字的函数
- 自建Yum源并与科大开源镜像站进行同步
- C++ 11 深度学习(九)C++文件IO
- 四、MyBatis 框架 Dao 动态代理
- Java LinkedList公共int indexOf(Object o)方法(带示例)
- vue-router的简单理解
- Servlet中forward和redirect的区别
- 四级网络工程师试题一
- h5 a标签下载链接下载文件
- 印度公司注册数据[1857-2020]
- Spurious vs Harmonics
- 中标麒麟Neokylin7桌面版安装指南——基于VirtualBox虚拟机
- kubuntu16.04安装和卸载fcitx输入法
- 【Android 逆向】ART 脱壳 ( dex2oat 脱壳 | /art/dex2oat/dex2oat.cc#Dex2oat 函数源码 )
- 计算机系统--机器指令与汇编
- 【计算机毕业设计】269购物商城网站的设计与实现
- 传奇GOM引擎-GEE引擎版本如何添加GM账号刷装备
- c# http put请求 通用http请求 post get put
- 调制与解调(1)——初认识
- python中删除list中某指定元素
热门文章
- Tapdata 的 2.0 版 ,开源的 Live Data Platform 现已发布
- AudioStreamBasicDescription: 2 ch, 44100 Hz, ‘lpcm’ (0x00000C2C) 8.24-bit little
- 华为数通 软开2021实习生 业务主管面 (已通过)
- PDF 转成 一张图片
- deepin/linux下svn客户端工具
- 图片合成视频软件(二)软件自动选取时间节点
- 使用ArrayList集合实现学生管理系统
- 查看手机包名方法介绍
- 清华学生告诉你什么是清华!
- for example: not eligible for auto-proxying问题排查