overflow:hidden的意思
超出的部分要裁剪
overflow:hidden的作用
- 清除浮动
float 的元素不占普通流的位置，而普通流的包含块要根据内容高度裁剪隐藏。
如果高度默认（auto）即不设高度，那么不计算其内浮动元素高度就裁剪，可能会裁剪掉float，这是反布局常识的。所以如果没有明确设定内容器高情况下，他要计算内容全部高度才能确定在什么位置hidden，浮动的高度就要被计算进去，顺带达成了清除浮动的目标。 - 隐藏溢出
当普通流的包含块高度设定时，他会根据包含块高度才hidden，当内容高度超过包含块时超出的部分就会被隐藏。
具体实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="box">
<div id="content">
</div>
</div>
</body>
</html>
#box{
border:1px solid black;
width:50px;
background:#000;
height:50px;
overflow: hidden;
}
#content {
border:1px solid yellow;
float:left;
width:100px;
height:100px;
background:red;
}
未清除浮动效果图（外边距塌陷）
清除浮动效果图
溢出的效果图
隐藏溢出的效果图
当我们没有给box设置高度的时候，content 的高度，就会撑开box，这就是清除浮动。当我们给box加上一个高度值，那么无论content 的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
注：引用了部分知乎貘吃馍香的回答。
网友评论