专注电子商务
网络营销、微信电话15545972811

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等



无标题文档

一. overflow:hidden  溢出隐藏
给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。

/*css样式*/
<style type=”text/css”>
div{ width: 150px; height: 60px; background: skyblue;
overflow: hidden; /*溢出隐藏*/
}
</style>

/*html*/
<div style=””>
今天天气很好!<br>今天天气很好!<br>
今天天气很好!<br>今天天气很好!<br>
</div>
效果如下:

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等

一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。

/*只适用于单行文本*/
div{
width: 150px;
background: skyblue;
overflow: hidden; /*溢出隐藏*/
white-space: nowrap; /*规定文本不进行换行*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…)*/
}
效果如下:

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等

二. overflow:hidden  清除浮动
一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。那么问题来了,如下:

/*css样式*/
<style type=”text/css”>
.box{ background:skyblue; }
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>

/*html*/
<body>
<div class=”box”>
<div class=”kid kid1″>子元素1</div>
<div class=”kid kid2″>子元素2</div>
</div>
<div class=”wrap”>其他部分</div>
</body>

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等

如上,由于父级元素没有高度,下面的元素会顶上去,造成页面的塌陷。因此,需要给父级加个overflow:hidden属性,这样父级的高度就随子级容器及子级内容的高度而自适应。如下:

由于在IE比较低版本的浏览器中使用overflow:hidden;是不能达到这样的效果,因此需要加上 zoom:1;

所以为了让兼容性更好的话,如果需要使用overflow:hidden来清除浮动,那么最好加上zoom:1;

/*css样式*/
<style type=”text/css”>
.box{ background:skyblue;
overflow: hidden; /*清除浮动*/
zoom:1;
}
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>

/*html*/
<body>
<div class=”box”>
<div class=”kid kid1″>子元素1</div>
<div class=”kid kid2″>子元素2</div>
</div>
<div class=”wrap”>其他部分</div>
</body>

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等

三. overflow:hidden  解决外边距塌陷
父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:

/*css样式*/
<style type=”text/css”>
.box{ background:skyblue;}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>

/*html*/
<body>
<div class=”box”>
<div class=”kid”>子元素1</div>
</div>
</body>

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等

因此,给父级元素添加overflow:hidden,就可以解决这个问题了。

/*css样式*/
<style type=”text/css”>
.box{ background:skyblue;
overflow: hidden; /*解决外边距塌陷*/
}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>

/*html*/
<body>
<div class=”box”>
<div class=”kid”>子元素1</div>
</div>
</body>

关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等
欢迎转载,转载请注明出处:关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等: http://www.quananxin.com/?p=652
赞(0) 打赏
未经允许不得转载:东北狼仙-专注哈尔滨SEO_网络营销SEM_品牌策划_电子商务 » 关于overflow:hidden的作用溢出隐藏、清除浮动、解决外边距塌陷等等
分享到: 更多 (0)
111资源在第三方平台采集下载,本站不存储该软件为用户提供下载;本站内发布的资源均来源于互联网收集与网友投稿,不保证真实性;另站内所有资源均不代表本站立场,若有侵权或出现违规内容请联系管理员删除; 本站所有资源皆都来源于互联网公开分享的内容,仅限用于个人学习使用; 本站站内所有资源请禁止用于商业用途和倒卖,如真正需要,请支持版权方;

评论 抢沙发

评论前必须登录!

 

网络营销 品牌策划 网站制作

哈尔滨SEO网络营销

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏