overflow：hidden作用

overflow：hidden具有三个作用，有查出边框部分隐藏的作用，清除浮动的作用，解决边框塌陷的作用。

1.超出变宽部分隐藏

大家来看一下下面的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>div{width: 100px;height: 50px;overflow: hidden;}span{font-size: 20px;}</style>
</head>
<body><div><span>超出隐藏</span><br><span>超出隐藏</span><br><span>超出隐藏</span><br></div>
</body>
</html>

代码效果

大家可以看到第三行的span标签被隐藏了

文本还可以设置超出部分用省略号表示

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>div{width: 60px;height: 100px;overflow: hidden;/* 文本不能进行换行 */white-space: nowrap;/* 文本溢出部分用省略号表示 */text-overflow: ellipsis;}span{font-size: 20px;}</style>
</head>
<body><div><span>超出隐藏</span><br><span>超出隐藏</span><br><span>超出隐藏</span><br></div>
</body>
</html>

结果

下面设计到一个overflow的用法：overflow：hidden溢出隐藏

overflow：scroll显示滚动条

overflow：auto超出显示滚动条

2.清除浮动

当不给父级元素设置高度的时候，其内部元素浮动后会导致下面的元素顶山去，这是因为子元素浮动后，子元素脱离标准流，不占位，父元素检测不到子元素的大小，从而高度为0.

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>.father{width: 300px;background-color: yellow;}.son{width: 50px;height: 100px;float: left;background-color: turquoise;}.xiamian{width: 200px;height: 200px;background-color: violet;} </style>
</head>
<body><div class="father"><div class="son"></div></div><div class="xiamian"></div>
</body>
</html>

效果如下

给父元素加入overflow：hidden之后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>.father{width: 300px;background-color: yellow;overflow: hidden;}.son{width: 50px;height: 100px;float: left;background-color: turquoise;}.xiamian{width: 200px;height: 200px;background-color: violet;} </style>
</head>
<body><div class="father"><div class="son"></div></div><div class="xiamian"></div>
</body>
</html>

效果如下

可以看到下面的div不会再占据上面div的位置

3.解决外边距塌陷问题

当给子元素设置magic-top的时候父元素也会下降

看下面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>.father{width: 300px;height: 200px;background-color: yellow;}.son{width: 50px;height: 100px;margin-top: 100px;background-color: turquoise;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

效果如下

给父元素加上overflow：hidden之后

看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>.father{width: 300px;height: 200px;background-color: yellow;overflow: hidden;}.son{width: 50px;height: 100px;margin-top: 100px;background-color: turquoise;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

效果如下

overflow：hidden作用相关推荐

移动端浏览器body的overflow:hidden并没有什么作用
今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...
安卓手机移动端页面为body设置overflow:hidden;不起作用
动态的改变body的样式,测试了可行 var scrollTop = $("body").scrollTop();//body设置为fixed之后会飘到顶部,所以要动态计算当前用户 ...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. /*css样式*/ ...
html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
深入理解：overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
overflow:hidden的另一层含义
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
overflow:hidden属性
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
overflow: hidden的用法
overflow: hidden常用于父元素上.当子元素的内容超过了父元素的大小时,子元素的内容会被修剪.最基本的用法就是溢出隐藏. overflow属性的基本用法 overflow 属性规定当内容溢 ...
HTML中overflow的作用（转）
转自:HTML中overflow的作用 Overflow属性: 主要用于设置盒子的属性,规定当内容溢出元素框时发生的事情,这个属性主要有这个设置值 1.overflow:visible 默认值,内容不 ...

overflow：hidden作用

overflow：hidden作用相关推荐

最新文章

热门文章