浮动引起的父容器塌陷问题：
float是我们在左右布局中经常用到的标签，在使用时引起的父容器塌陷问题总是令人非常头疼。今天笔者就来详细得写写解决父容器的塌陷问题都有哪些办法，这些办法的好处和坏处都又有哪些。
首先我们先写一个父容器塌陷问题。让两个div进行左浮动。
<style>
#all{
border: 3px solid black;
}
.one,.two{
width: 150px;height: 150px;
}
.one{
background: green;float: left
}
.two{
background: red;float: left;
}
</style>
</head>
<body>
<div id="all">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
运行结果图：
此时很明显，父容器#all塌陷了。
解决塌陷问题
出现问题的原因：
当给块儿标签加了float时，块儿标签就脱离了文档流，相当于往上走了一层楼，到了第二层楼，而此时他们的父容器仍然在一楼。我们也没有给父容器设置固定的高度，父容器内此时等于没有内容，所以才造成了塌陷。
想要解决父容器他的问题也很简单
第一种办法：（不推荐）
给父容器#all固定他的高度。
当给父容器固定高度后，他的高度就不是靠里面的内容撑开了，也就不会出现塌陷的问题。
这种方法的坏处：
它不智能，当你父容器里的内容变多或者变少时，你还需要再对父容器的高度进行计算和更改，费时费力，所以不推荐。
第二种办法：（不推荐）
让父容器也进行浮动。
父容器塌陷的原因就是内容到了二楼，而父容器依然在一楼，没有了内容将他的高度撑开。我们如果将父容器也进行浮动，让他也到二楼，此时他们在同一楼，问题也就解决了。
这种方法的坏处：
会严重影响页面下面的内容，下面的内容会向上移动，使你的页面整体乱套。
例子：
<style>
#all{
border: 6px solid black;float: left;
}
.one,.two{
width: 150px;height: 150px;
}
.one{
background: green;float: left;
}
.two{
background: red;float: left;
}
.three{
background: blue;
width: 350px;height: 300px;
}
</style>
</head>
<body>
<div id="all">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="three"></div>
</body>
运行结果图：
第三种办法（不推荐）
利用display:inline-block;（BFC规范）来解决。
这种办法的坏处：
display:inline-block;是将父容器转变成一个内联的块儿，让他同时具备内联标签与块儿标签的特性，会使后面的布局在父容器的后面排列，而不是下方，所以不推荐。
第四种办法：（可以使用，但是不是第一选择）
利用给父容器添加overflow:hiddent;（BFC规范）来解决。
这种办法的坏处：
我们都知道overflow:hiddent;是溢出隐藏。所以如果父容器内有子元素想要溢出，那么将会受到影响而无法溢出显示，可以根据需求使用。
<style>
#all{
border: 6px solid black;overflow: hidden;
}
.one,.two{
width: 150px;height: 150px;
}
.one{
background: green;float: left;
}
.two{
background: red;float: left;
}
</style>
</head>
<body>
<div id="all">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
运行结果图：
第五种办法（可以使用，但不是第一选择）
在父容器的最后加一个空标签div,然后对这个div添加清除浮动（此时这个div与里面的内容是上下布局）：clear:both;，此时相当于解决了".one,.two"与".clear"的上下布局所引起浮动问题，让第三个空标签将父容器撑开。
例子：
<style>
#all{
border: 6px solid black;
}
.one,.two{
width: 150px;height: 150px;
}
.one{
background: green;float: left;
}
.two{
background: red;float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div id="all">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
</body>
运行结果图：
这种办法的坏处：
虽然这种办法可以有效的解决父容器的塌陷问题，但是在写页面的过程中，我们会进行许多的左右布局，如果都用这种办法解决父容器的塌陷问题，那么将会写许多这种没有含义的代码，耗时耗力，所以不推荐。
第六种办法（强烈推荐，一般都这么用）
利用after伪类来解决问题。#all:after{ content:" " ;clear:both; display:block; }
这个是第五种办法的升级强化版。我们已经知道了第五种办法的原理，而他唯一存在的问题就是代码量大，无语义化的标签多。如果我们解决掉这个问题，那么这个办法将是目前最实用的办法。
原理解释：
:after是伪类选择器，其含义是在这个标签里面的最后添加内容。
一. 先写一个：content:" "; —添加一个空的内容，它此时等价于第五种办法：在父容器的最后添加了一个空的div。
二. 再写一个：clear:both;—给这个空的内容清除上下布局浮动引起的问题。
三. 最后写一个：display:block;—我们用content添加的这个空的内容默认是内联的，如果不把它转成一个块儿标签，它就不会与父容器里面的内容上下排列，clear：both；也就没有了意义，问题也就解决不了。
在写页面的左右布局时，我们可以提前写好这些东西，然后给需要的标签进行添加class名，非常方便：
<style>
.r{
float: right;
}
.l{
float: left;
}
.clear:after{
content: "";
clear: both;
display: block;
}
</style>
例子：
<style>
.l{
float: left;
}
.clear:after{
content: "";
clear: both;
display: block;
}
#all{
border: 6px solid black;
}
.one,.two{
width: 150px;height: 150px;
}
.one{
background: green;
}
.two{
background: red;
}
</style>
</head>
<body>
<div id="all" class="clear">
<div class="one l"></div>
<div class="two l"></div>
</div>
</body>
运行结果图：
补充：
针对上下布局引起的浮动问题，给受影响的内容添加：clear:both;就好。
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
