overflow:hidden
2018-04-20 本文已影响30人
椰果粒
作用：overflow:hidden可以隐藏超出部分，清除浮动，解决塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrapper{
width: 300px;
height: 150px;
background-color: yellow;
}
.content1{
width: 100px;
height: 100px;
background-color: red;
}
.content2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content1">1</div>
<div class="content2">2</div>
</div>
</body>
</html>
原始图
.wrapper{
// 给父元素添加overflow，子元素超出部分就会被隐藏了
overflow: hidden;
}
超出隐藏
清除浮动
// 父元素不设置高度，子元素浮动时，给父元素添加overflow:hidden就会清除浮动
.wrapper{
// 给父元素添加overflow，清除浮动
overflow: hidden;
}
参考：https://www.jianshu.com/p/1069f9cf02db
原理：超出部分要裁切隐藏掉，如果浮动的元素不占据普通流的位置，那么没有被计算在内的浮动元素就会被裁切掉，就可能会裁切掉float，所以在没有明确设定父元素高的情况下，父元素需要计算里面内容的全部高度（浮动元素也计算）来确定在什么地方hidden，所以浮动元素的高度就被计算进去，顺便清除了浮动。
解决塌陷
当我们给父元素的第一个子元素设置margin-top时，按理来说应该是以下的效果：
理想效果
实际效果是如下样子：
实际 效果
从中看到：其实把父元素顶下去了。
解决方案：给父元素添加overflow:hidden;，理由是加了overflow后就成为BFC元素了
浮动塌陷问题及解决方式
<div class="wrapper">
<div class="content1">1</div>
<div class="content2">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
.content1{
width: 100px;
height: 20px;
background-color: red;
}
.content2{
width: 400px;
background-color: green;
/*overflow: hidden;*/
}
.content2 div{
background-color: blue;
border: 1px solid #000;
height: 30px;
}
塌陷
当放开右侧.content2的overflow:hidden时，.content2就成为一个BFC了，这样就不会和浮动元素重叠，从而解决了塌陷问题
解决塌陷
BFC
BFC是block formatting context，可直译为块格式化上下文，定义了一块独立的渲染区域，规定了内部元素的渲染规则，渲染效果不受外部环境的干扰。
规则：
- 1.内部的块元素垂直放置，一个一个的
- 2.块元素垂直方向的距离由margin决定，相邻元素的margin会重叠
- 3.每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
- 4.BFC区域不会与float区域重合
- 5.BFC是页面上的隔离的独立容器，容器里的子元素不会影响外部的元素，外部也不会影响里面的元素
- 6.计算BFC的高度时，浮动元素 也计算在内
给元素添加一下style时，该元素就会成为一个BFC元素
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
