在网上有很多关于用overflow:hidden来清除浮动的文章，这种说法是不对的。这里来更正一下，overflow:hidden清除不了浮动，其实它隐藏了浮动元素的一部分。
我们用一个例子来说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.wrap{
outline:red 1px solid;
width: 250px;
height: 50px;
}
.item{
width: 100px;
height: 100px;
outline: blue 1px solid;
}
</style>
<body>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
<script>
</script>
</body>
</html>上面的代码没有设置浮动，效果如下图所示：
这个很好理解，三个div，这三个div都在文档流中。
现在我们设置蓝色边框div向左浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.wrap{
outline:red 1px solid;
width: 250px;
height: 50px;
}
.item{
width: 100px;
height: 100px;
outline: blue 1px solid;
float: left
}
</style>
<body>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
<script>
</script>
</body>
</html>两个蓝色边框div都脱离了标准文档流 向左浮动。第一个蓝色边框div发现它上边的div没有脱离标准文档流，所以它紧邻显示。第二个蓝色边框div发现它上边的div是浮动的，所以它在这个浮动的div右边显示。效果如下：
我们看出浮动效果了。
我们再添加一个div：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.wrap{
outline:red 1px solid;
width: 250px;
height: 50px;
}
.item{
width: 100px;
height: 100px;
outline: blue 1px solid;
float: left
}
.secWrap{
outline:black 1px solid;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="secWrap"></div>
<script>
</script>
</body>
</html>我们新添加的div 没有设置浮动，所以它并没有脱离文档流，所以会挨着第一个div显示，效果如下：
我们看到新增加的黑色边框div在红色边框div下面紧挨着显示。其实这四个div，红色边框div和黑色边框div 没有脱离文档流，两个蓝色边框div已脱离文档流。
好了，那么我们给红色边框div增加一个overflow:hidden属性，看看什么效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.wrap{
outline:red 1px solid;
width: 250px;
height: 50px;
overflow:hidden;
}
.item{
width: 100px;
height: 100px;
outline: blue 1px solid;
float: left
}
.secWrap{
outline:black 1px solid;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="secWrap"></div>
<script>
</script>
</body>
</html>
我们看到两个蓝色边框div缺少了一部分，被隐藏了，但并没有清除浮动，它们还是脱离文档流，浮动的。
