浮动是CSS较常见的布局手段之一。为什么要使用浮动？使用浮动后会产生哪些变化与问题？又该如何解决问题？
为什么使用浮动？浮动出现的初期仅是为了解决文字环绕浮动元素问题（文字不会被浮动元素覆盖，自动分布在浮动元素周围）,逐渐的浮动慢慢应用到解决多个块级元素同行出现的问题，虽然我们可以通过将块级元素设置为display：inline-block使多个块元素同行，但是该方式不能控制元素的位置，所以实现元素是居左还是居右使用浮动更加方便。
使用浮动后的变化与问题？运用浮动之后，水平布局的等式便不再强制要求成立。此时浮动元素虽然会完全从文档流中脱离，但却不会从父元素中移除(可能会溢出父元素)。浮动元素不再占用文档流中的位置，故而元素下面的并还在文档流中的元素会自动向上移动。浮动元素脱离文档流后不需要再区分块和行内（块元素不再独占一行，其宽高默认被内容撑开。行内元素本来不设宽高，脱离后会变成块元素）。
说到这里，再说一下运用浮动会出现的无可避免的问题。下面我将以一个例子来探索浮动所带来的问题。
<div id="header">
<div id="box1"></div>
<div id="text1">去年在福建，仿佛比现在更迟一点，也曾见过雪。但那是远处山顶的积雪，可不是飞舞的雪花。在平原上，它只是偶然的随着雨点洒下来几颗，没有落到地面的时候。它的颜色是灰的，不是白色；它的重量像是雨点，并不会飞舞。一到地面，它立刻融成了水，没有痕迹，也未尝跳跃，也未尝发出唏嘘的声音，像江浙一带下雪时的模样。这样的雪，在四十年来第一次看见它的老年的福建人，诚然能感到特别的意味，谈得津津有味，但在我，却总觉得索然。"福建下过雪"，我可没有这样想过。</div>
</div>
<div id="footer">
<div id="box2"></div>
<div id="text2">去年在福建，仿佛比现在更迟一点，也曾见过雪。但那是远处山顶的积雪，可不是飞舞的雪花。在平原上，它只是偶然的随着雨点洒下来几颗，没有落到地面的时候。它的颜色是灰的，不是白色；它的重量像是雨点，并不会飞舞。一到地面，它立刻融成了水，没有痕迹，也未尝跳跃，也未尝发出唏嘘的声音，像江浙一带下雪时的模样。这样的雪，在四十年来第一次看见它的老年的福建人，诚然能感到特别的意味，谈得津津有味，但在我，却总觉得索然。"福建下过雪"，我可没有这样想过。</div>
</div>#header{
border: 1px solid red;
}
#box1{
width: 100px;
height: 200px;
border: 1px solid black;
float: right;
}
#footer{
border: 1px solid green;
}
从上述例子运行结果我们可以看出存在的问题：
1.文字虽然围绕着浮动元素排列，但是开发者有时也许希望文字排列在其下方或其他位置。
2.上述浮动元素超出了父元素的高度（父元素高度塌陷）
3.浮动元素使自身父元素下面的兄弟元素排列发生了改变
如何解决问题呢？一.清除文本两侧的浮动，这样文本便在浮动元素的下方排列。二.父元素的兄弟元素位置仅受父元素位置的影响，故仅需将父元素的高度撑起来，使其浮动元素被包含在其中，从而避免影响父元素以外的元素排列。
上述例子中浮动元素影响了text2排列，可清除text2右侧浮动：
#text2{
clear: right;
}
我们可以看出，为text2设置clear后，该元素右侧不会再出现浮动元素 。这里要提到一点，如果我们仅仅是为了清除文本两侧的浮动，设置clear便已经达到了目的，设置了clear的元素在特定的位置（left，both，right）不会再有浮动元素出现，所以，clear只关注自身的需求是否达到，与外界没有任何关系，它不关注浮动元素是否超出父元素，也不关注浮动元素是否影响到后面元素排列问题。因此，设置clear不等于撑起父元素高度。
这里我总结了几种撑起父元素高度的解决方案：
1.在父元素结束标签之前插入一个空的块级元素[注意：添加的必须是块级元素]，并设置clear：
<div id="header">
<div id="box1"></div>
<div id="text1">去年在福建，仿佛比现在更迟一点，也曾见过雪。但那是远处山顶的积雪，可不是飞舞的雪花。在平原上，它只是偶然的随着雨点洒下来几颗，没有落到地面的时候。它的颜色是灰的，不是白色；它的重量像是雨点，并不会飞舞。一到地面，它立刻融成了水，没有痕迹，也未尝跳跃，也未尝发出唏嘘的声音，像江浙一带下雪时的模样。这样的雪，在四十年来第一次看见它的老年的福建人，诚然能感到特别的意味，谈得津津有味，但在我，却总觉得索然。"福建下过雪"，我可没有这样想过。</div>
<div class="enter"></div>
</div>
<div id="footer">
<div id="box2"></div>
<div id="text2">去年在福建，仿佛比现在更迟一点，也曾见过雪。但那是远处山顶的积雪，可不是飞舞的雪花。在平原上，它只是偶然的随着雨点洒下来几颗，没有落到地面的时候。它的颜色是灰的，不是白色；它的重量像是雨点，并不会飞舞。一到地面，它立刻融成了水，没有痕迹，也未尝跳跃，也未尝发出唏嘘的声音，像江浙一带下雪时的模样。这样的雪，在四十年来第一次看见它的老年的福建人，诚然能感到特别的意味，谈得津津有味，但在我，却总觉得索然。"福建下过雪"，我可没有这样想过。</div>
</div>.enter{
clear:both;
}
2.给父级元素单独定义高度，这样父元素的高度将不会塌陷，但是它仅仅适合固定高度的布局，对于响应式布局存在一定的限制。
3.采用伪元素：为父元素添加一个类（该例题中，我添加了class="clear"），然后利用伪元素解决：
<div id="header" class="clear">
<div id="box1"></div>
<div id="text1"></div>
</div>.clear:after{
content: "";
display: block;
clear: both;
}
4.利用overfloat清除浮动（给父元素添加一个overfloat：hidden等）
