导读：
很早之前接触 CSS 的时候就和浮动打过交道，不过当时只是简单的认识了一下，而今在布局的时候再次遇到，所以在此来对浮动的相关内容进行总结一下，以便更好的理解浮动。
基本概念
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置。CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立各种布局，其包含的三种布局格式：：
- 标准文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
- 浮动流：浮动流是一种"半脱离标准流"的排版方式，就是水平排版. 它只能设置某个元素左对齐或者右对齐。
- 定位流：定位流也是脱离标准流的一种模式。它完全脱离标准流，包括
absolute和fixed。
CSS 浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
标准文档流：
NO0
NO1
NO2
对 NO0 添加了向右的浮动，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
NO0
NO1
NO2
对 NO0 添加了向左的浮动，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘，由下图可见其脱离了正常的文档流，并浮动在其上（此处覆盖了 NO1）：
NO0
NO1
NO2
如果把所有三个块都向右移动，那么 NO0 向右浮动直到碰到包含框，另外两个依次向右浮动直到碰到前一个浮动框。
NO0
NO1
NO2
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间:
NO0
NO1
NO2
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”(NO2 被 NO0 卡住）：
NO0
NO1
NO2
浮动元素之前的元素不会受到影响，之后的元素将围绕它，因为浮动框旁边的行框被缩短，从而给浮动框留出空间。所以如果图像是右浮动，下面的文本流将环绕在它左边：
图
something text something text something text something text something text something text something text
总结
- 浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。
- 浮动的框可以向左或向右移动，直到它的外边界接触到包含块（其最近的块级祖先元素）的内边界『另一个浮动元素的外边界。
- 浮动元素脱离了标准文档流，文字和行级元素会围绕该元素。
- 浮动元素的margin（外边距）不会与其他元素的margin合并，所以是边界折叠的一种解决方法。
写在最后
浮动的基本内容就写到这里，总结记录一下，加强记忆，也方便查阅。更多内容点击查看 CSS 清除浮动的几种方法。
如果文中有什么错误，欢迎大家指正，愿与大家在交流之中共同进步，愈激烈，愈深刻。感谢。