css浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
2当框一向左浮动时，它脱离文档流并且向左移动，直到它的左边边缘碰到包含框的左边缘，因为它不再处于文档流中，所以它不占据空间，实际上是盖住了框2 ，使框2从视图中消失。
如果把所有的框都向左移动，那么框一向左浮动直到碰到包含框的边缘，另外两个框向左浮动直到碰到前一个浮动框。
3 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如果浮动元素的高度不同，那么当它们向下移动是可能被其它浮动元素卡主，如下图所示：
css float属性
在css中，通过float属性实现元素的浮动
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
float属性的实例：
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"/> 4 <title></title> 5 <head> 6 <style> 7 <!-- .content{border:1px solid black;} --> 8 div{color:#ffffff;font-weight:bold;text-align:center;font-size:20px;} 9 p{margin-top:40px;} 10 .box-top{width:300px;height:100px;} 11 .box-con1{width:300px;height:100px;} 12 .box-con2{width:300px;height:100px;} 13 .d1{width:100px;height:100px;background:#142ab4;float:left;} 14 .d2{width:100px;height:100px;background:#fe0000;float:left;} 15 .d3{width:100px;height:100px;background:#4eff01;float:left;} 16 .d4{width:100px;height:100px;background:#362327;float:left;} 17 .d5{width:100px;height:100px;background:#11234b;float:left;} 18 .d6{width:100px;height:100px;background:#6c410a;float:left;} 19 .d7{width:100px;height:100px;background:#6b0014;float:left;} 20 .d8{width:100px;height:100px;background:#ff00cd;float:left;} 21 .d9{width:100px;height:100px;background:#ff9000;float:left;} 22 .d10{width:100px;height:100px;background:#b6c1ff;float:left;} 23 .d11{width:100px;height:100px;background:#fcff00;float:left;} 24 .d12{width:100px;height:100px;background:#00fff0;float:left;} 25 </style> 26 </head> 27 <body> 28 29 <div class="box-top"> 30 <div class="d1"><p>1<p></div> 31 <div class="d2"><p>2</p></div> 32 <div class="d3"><p>3</p></div> 33 </div> 34 <div class="box-con1"> 35 <div class="d4"><p>4</p></div> 36 <div class="d5"><p>5</p></div> 37 <div class="d6"><p>6</p></div> 38 </div> 39 <div class="box-con2"> 40 <div class="d7"><p>7<p></div> 41 <div class="d8"><p>8</p></div> 42 <div class="d9"><p>9</p></div> 43 </div> 44 <div class="box-bott"> 45 <div class="d10"><p>10<p></div> 46 <div class="d11"><p>11</p></div> 47 <div class="d12"><p>12</p></div> 48 </div> 49 </body> 50 </html>