今天我们分享关于浮动布局的内容。
HTML文档流：
在学习浮动布局前，我们先来学习一下什么叫“正常文档流”，深入了解正常文档流，对后面学习浮动布局和定位布局是非常重要的前提。
文档流，简单来说，就是元素在页面出现的先后顺序，正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按照从左至右的顺序依次排列。
| 块元素1 | ||
| 行内元素1 | 行内元素2 | 行内元素3 |
| 块元素2 | ||
| 行内元素5 | 行内元素5 | 行内元素6 |
| 块元素3 | ||
上面的HTML代码的文档流如下：
<div></div><span></span><span></span><span></span><p></p><span></span><img><span></span><hr>
由于div，p，hr都是块元素，因此独占一行。而span，img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左至右排列。
脱离正常文档流：
脱离正常文档流是相对于正常文档流而言的。正常文档流就是我们没有使用CSS样式控制的HTML文档结构，按照你写的界面顺序展示。
HTML代码如下：
<div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div>
效果如下：
| div1 |
| div2 |
| div3 |
| div4 |
| div5 |
脱离文档流就是指的显示位置和文档代码顺序不一致时，比如我们通过使用CSS样式代码，把最后一个div元素放置在最开始的位置。
| div5 |
| div1 |
| div2 |
| div3 |
| div4 |
在CSS布局中，我们可以使用浮动或者定位两种技术来实现脱离正常文档流，从而到达页面布局。
浮动float：
在前端开发中，我们可以使用属性float来到达灵活布局div元素的目的。浮动元素会生成一个块级框，而不论本身是何种元素。
语法：
float:取值；
| float属性取值 | |
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
默认情况下，元素是不浮动的。浮动的性质比较复杂，需要通过代码来让大家感受一下。
示例代码：
<html> <head> <title>float属性</title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } </style> </head> <body> <div id="father"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <p>我是浮动框外围的文字</p> </div> </body></html>
上面代码定义了4个div块，一个是父元素，另外三个div是它的子元素。三个元素都没有设置浮动方式时，页面显示效果是4个盒子自上而下的排列的。
设置第一个div浮动：
<html> <head> <title>float属性</title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; }</style> </head> <body> <div id="father"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <p>我是浮动框外围的文字</p> </div> </body></html>
由于box1设置了左浮动，它就脱离了文档流，没有按照正常顺序显示了。
设置第二个div浮动：
<html> <head> <title>float属性</title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; } #box2 { float:left; }</style> </head> <body> <div id="father"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <p>我是浮动框外围的文字</p> </div> </body></html>
由于box2也设置了浮动元素，因为它也脱离了文档流。但是box1和box2之间为什么存在一定的距离呢？这是因为在CSS中，我们对box1、box2和box3都定义了外边距，浮动之后，外边距就生效了。
设置第三个div浮动：
<html> <head> <title>float属性</title> <style type="text/css"> #father { width:400px; background-color: #0c6a9d; broder: 1px solid silver; } #father div{ padding:10px; margin:15px; border: 2px dashed red; background-color: #fcd568; } #father p { margin: 15px; border: 2px dashed red; background-color: #fcd568; } #box1 { float:left; } #box2 { float:left; } #box3 { float:left; }</style> </head> <body> <div id="father"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <p>我是浮动框外围的文字</p> </div> </body></html>
由于box3也变成了浮动元素，相邻的p元素就紧贴这box3，你会看到文字都环绕在旁边。
float属性在CSS布局中是非常重要的技巧属性，我们通常会对div元素应用float浮动来进行页面布局，不但可以对整个版式进行，也可以对一些基本元素进行排列。
浮动，这个属性对于初学者来说，掌握起来不容易，需要多练习，才能体会到其中的奥妙。
