浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。
效果图
原理非常简单，左右侧边栏定宽并浮动，中部内容区放最后不浮动、默认width：auto并设置相应外边距，让左右侧边栏浮动到上面。注意：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。
效果图
思路：
1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。
2)浮动之后还要让center宽度自适应，那明显width只能100%，然后在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。
3)对left使用负的margin让他们浮动到上方去。
两种发放多少有一点区别，另外就是 calc() 函数。
总结： 使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参差不齐的排列要美观。
说浮动布局，就得先知道文档流，文档流有 正常文档流 、 脱离文档流 。
对应的正常文档流如图，
例如01：
结果：
分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。
例如02：
只设置后面两个div左浮动
结果：
例如03：
全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0
2.浮动带来的影响
效果如图：对比例3，父元素高度塌陷问题解决
此外，浮动可以用来实现两列布局或多列布局
例如：
结果：
