分类:
html
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 清除浮动
- /*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属性，这样父级的高度就随子级容器及子级内容的高度而自适应。如下：
为了让兼容性更好，最好加上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 解决外边距塌陷
- /*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，就可以解决这个问题了:
- /*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>
评价
