在早期网页制作过程中，为了达到图片word文档那样的文字环绕效果，不至于图片和文字不在一行显示，图片占据一行，文字占据一行，这样的样式并不符合大众的审美观，浪费空间，所以w3c就创建了float这个css属性。
2，浮动的包裹性和破坏性
破坏性是指子级元素设置浮动后将会跳出父级元素，父级元素将不被浮动元素所撑开，除非清除浮动带来的影响。
包裹性是指子级元素设置浮动后，并且父元素已经被清除浮动后将会将子元素包裹住，就像inline-block一样。
4，浮动在布局中的应用
(1)，双飞翼布局
双飞翼布局就是利用float和margin负值相结合的方式，将center定位到最中间，难点在于margin单位百分比的理解。
(2)，圣杯布局
圣杯和双飞翼区别：
二者都是三栏自适应布局方案，圣杯布局是需要结合相对定位，用到left属性，而双飞翼布局只需要使用浮动和margin定位，前者三栏布局是每栏相互独立，而后者是center占据是100%,left和right是浮在center上的。
(2)，两列布局
如图五图六所示，当左侧div左浮动，右侧div将会自动适应余下的宽度，当界面大小发生改变时，右侧div同样会随着变化，如果想让左右div中间有一个间距的话，我们可以用右侧div设置一个margin-left为：左侧div的宽度+间距。
如果想让左侧右侧同时自适应的话，我们可以让右侧元素BFC化，此时左侧元素div的marin-left才会有效，如果右侧div不BFC化的话，属于正常流，而浮动已经脱离正常流，所以此时它的margin-left是无效的。
5，清除浮动带来的影响的方法
(1)，使用clear:both
.father:after{/*IE7和IE6不识别*/
content:''
display:block
clear:both
overflow:hidden
height:0
}
.father{
*zoom:1/*兼容IE7*/
}
(2)，内部使用空标签
div{clear:both}
缺点是多了一个空标签，无意义。
(3)，使用BFC
在子元素中使用overflow,position,inline-block,tabel-cell
(4)，使用table
.father:after{/*IE7和IE6不识别*/
content:''
display:table
clear:both
}
.father{
*zoom:1/*兼容IE7*/
}
圣杯布局 和 双飞翼布局 一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。 注意：为了安全起见，最好还是给body加一个最小宽度!
|
|
【1】浮动
【2】flex弹性盒子
【3】grid布局
如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线
开门见山，圣杯布局和双飞翼布局都是为了实现两边定宽,中间自适应的布局，只是在实现的方法上有些许不同，因此不要被这两个奇怪叫法的东西迷惑了。事实上，圣杯布局和双飞翼布局在设计思路上也有些相似之处，我将会一步步带领大家认识，并在后面为大家总结。
如果想了解掌握什么是传统模型、flex、grid布局，可以看看上一篇文章：
传统模型、Flex和Grid布局
如果感觉这两个布局理解起来较难，那么你可能是新人，可以看看另外一篇文章：
左右布局（传统模型、flex、grid的实现）
消除浏览器默认：
首先，我们先设置三个div的统一高度和float属性；并且设置center的width为100%，left和right的width为100px；
接着我们要想办法将 left 先进入到 center 的左边，注意这里说的是“进入”，看图中的文字“center”消失就理解了，这里用 margin-left:-100% ，-100%是要让 left 的左外边距向左移动父元素的宽的100%，因为 center 的宽度为100%
同理，我们将 right 进入到 center 的右边，这里 margin-left:-100px ，得到
到这里会发现基本成型了，但是别忘记 center 还有部分被遮挡，于是将整个父元素的内容层压缩
如下，仔细观察多出来的空白部分
这样就完成了我们圣杯布局啦~ 鼓励鼓励！！！
效果图就是开头那个，就不截图了，希望大家到这里能自己实操一下
其实双飞翼和圣杯布局前期做的事情都一样，即做到文字图1-3的效果，为了不被说是凑字数，滑动指头回去瞄一眼呗。
由图1-3中基本成型的布局中，我们要思考另外一种方式令 center 不再被遮挡，因此不同于圣杯布局的就是针对 center 自身进行改变，那么就给 center 增加一个子元素
通过对子元素设置左右外边距： margin:0 100px ，便能达到想要的结果。
因此，我们知道圣杯布局是在三个 div 并列后调整了父元素的内边距 padding 属性后移动左右两边的 div 实现的，而双飞翼布局则是在并列后在 center 中添加多一个子元素并对子元素进行外边距 margin 属性的调整实现的，其目的都只是为了解决中间的 div 层被遮挡的问题，那么下面我们将分别用 flex 和 grid 布局对这种三栏布局进行实现
CSS
其中，容器设置 display: flex ，中间栏需要自适应则 flex: 1 ，另外 order 属性能定义排列顺序。
grid布局相当于在容器设计好整个布局，也就是布局已经固定了，再将项目进行排列。
