float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.
       position: absolute|relative; 要配合top,left等定位;
使用：
　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

　　display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。

块级元素独占一行

块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

浮动

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

显然标准流已经无法满足需求，这就要用到浮动。 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

重要结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变(因为标准流中的块级元素是独占一行的)，也就是说A的顶部总是和上一个元素的底部对齐。

可以看出：

元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

分左右，有些标签不能在同一排显示的使用浮动布局之后就可以同时出现在一排。一般是用在行列元素上面。说白了就是方便你把东西整在一排。希望对你有帮助，祝你学习愉快！

上手flex布局吧，移动端大放的年代，flex才是未来的布局趋势

简而言之，就是包裹与破坏。慕课网上有张鑫旭大神的《深入理解float》课程，也可以去他的博客看看更仔细的文字说明。详细的说明了float魔鬼属性带来的优势和缺点以及解决办法。float一开始存在仅仅是因为文字环绕效果，后来被运用于分栏布局。楼上真是够了，什么叫不是一排的东西变成一排。