很多时候，浮动被用于Web布局(还需要依赖清除浮动属性)。事实上，浮动并不是为布局而生。
浮动
什么是浮动？
如果把一个元素设置为浮动，那么其他的内容就会围绕这个元素进行流动。
浮动元素会脱离正常的文档流，但是依然对布局有影响。
为什么使用浮动？
现实中的报刊，都会有一些图片围绕着文字。那么这种场景就特别适合浮动。
浮动API
浮动元素相对于父级元素进行浮动的。
Name: float
Value: left | right | none | inherit
Initial: none
left
浮动元素会自动生成display:block属性并浮动在左边。
right
浮动元素会自动生成display:block属性并浮动在右边。
注意点
不管是什么元素，浮动后都会得到display:block块级框。因此没必要手动申明display:block。
多个浮动元素不会发生重叠
浮动元素比父级元素还要高，那么会影响浮动元素的后代元素(后面的元素)
浮动元素会浮动到负外边距上，看上去比父元素更宽
如果浮动元素与内容重叠，那么内容都会在浮动元素之上渲染。
- 行内元素：边框、背景、内容都会在浮动元素之上渲染。
- 块级元素：边框、背景在浮动元素之下，内容在浮动元素之上渲染
清除浮动
清除浮动是为了不让内容跟随浮动元素进行流动。
清除浮动API
Name: clear
Value: none | left | right | both | inherit
Initial: none
left
左边远离浮动元素
right
右边远离浮动元素
both
左右两边都远离浮动元素
注意点
clear原理是增加了元素的上外边距(marginTop)，很多时候不知道元素需要下移左右，因此会给浮动元素添加下边距。
实践
想要一个左右布局，就可以简单是使用float: right。
引用
https://drafts.csswg.org/css2/#propdef-float
https://drafts.csswg.org/css2/#propdef-clear