在了解浮动布局之前，我们需要了解“正常文档流”和“脱离文档流”，这是学习浮动布局的理论前提。
正常文档流：
指的是默认情况下页面元素的布局情况，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
脱离文档流：
指的是脱离正常文档流，想要改变正常文档流，可以使用浮动方法。
/*正常文档流*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style type="text/css">
/*定义父元素*/
#father{
width: 300px;
background-color:gray;
border:1px solid silver;
}
/*定义子元素*/
#father div{
padding:10px;
margin:15px;
border:2px dashed red;
background-color: white;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
效果如下图：
设置浮动：
我们可以通过浮动来灵活定位页面元素，达到布局网页的目的。可以通过设置float属性让元素向左或者向右浮动，以便让周围的元素环绕着这个元素。
语法：
float:取值;
值为left时，元素向左浮动，值为right时，元素向右浮动。
为son2和son3设置左浮动，效果：
son2和son3成为浮动元素，宽度不再延伸，而是由内容决定宽度，如果son3后面还有其他元素，则其他元素会紧贴着son3。如果想要实现两列并排或者多列并排的效果，则可以使用浮动布局来实现。
清除浮动：
从以上的例子中我们可以发现，浮动会影响周围的元素，可能会引发许多预想不到的问题，想要清除这些影响，可以使用clear属性。
语法:
clear:取值;
取值为left，清除左浮动；取值为right，清除右浮动；取值为both，同时清除左右浮动。
<div style="clear:both;">
效果：
浮动涉及的理论较为复杂：包括块元素和行元素，CS盒子模型，脱离文档流，BFC，层叠上下文。还需要继续去学习理解。
