一、什么是float?
在css中float就是浮动的意思，简单来说，就是让元素浮动起来。如何理解？我们把网页想象成是拼图的底板，里面的元素就是一个个小的拼图块，所谓浮动就是让本来应该贴着拼图底板的块起来，这就是浮动，也是所谓的脱离文档流。标准文档流就是拼好的拼图。
二、使用float的结果？
我们先定义3个div
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 #son1{ 9 width: 100px; 10 height: 100px; 11 background-color: burlywood; 12 } 13 #son2{ 14 width: 200px; 15 height: 200px; 16 background-color: rgb(196, 222, 135); 17 } 18 #son3{ 19 width: 300px; 20 height: 300px; 21 background-color: rgb(135, 173, 222); 22 } 23 </style> 24 </head> 25 <body> 26 <div id="parent"> 27 <div id="son1">son1</div> 28 <div id="son2">son2</div> 29 <div id="son3">son3</div> 30 </div> 31 </body> 32 </html>