@[TOC]关于前端布局
前端的布局按其编写过程复杂程度可以分为传统布局与新式布局；
- 传统布局
所谓的传统布局就是不依赖与框架，主要是程序员根据CSS与HTML样式属性的运用来写的原生布局，比如dispaly、position、float等。
这种布局方式对程序员的基础知识要求较高，要会使用特定的样式属性，以及了解其使用的注意事项或者后期对布局的影响进行调试。但是，传统布局方式最大的好处就是其兼容性很好，对于IE6、IE7浏览器也能很好的兼容。
- 现代布局
新式布局，是对传统布局中存在的一些遗留疑难的解决方案，可以说是一种优化方案吧，其代表就是flex布局，自适应布局（adaptation），Grid布局，后面还有现在流行的响应式布局（BootStrap）。它们最大的特点就是其“智能化”，对于页面组件的位置，以及尺寸大小会根据浏览器展示局域大小来动态调整。这些都是一些计算机大厂为提高布局的简便性而开发出来的。
如果说面试官问到你会使用那种布局的时候，当然不能哪个流行说哪个，要说会结合项目开发的实际需要来选择，再提一下自己对时下流行布局方式也有一定的了解，那样你的回答基本就是满分的了。
布局方式有很多，但是我觉得学东西要理解其来龙去脉，虽然现在市面上对传统布局方式没有那么热衷了，但只有在理解其底层原理的时候，才能更好的运用新的东西，所以在写关于布局的时候，我将基于基础知识点的“流布局”排在首位，后期依旧会对其他新式布局详解。
关于“流”的基础概念
所谓“流”，相信在不少前端书都会提到的一个概念——“文档流”。结合实际来说，“文档流”就像水流，水，是液体可以自动的填满容器底部，无论这个容器大小，都可以将其底部覆盖。而“文档流”就是对一些具有“流特性”的块状元素的统称，这些块状元素默认情况下会自动沾满整个浏览器的一行，不够自动换行。
在了解“流”特性前要对“块元素”，“盒子模型”，BFC,“包含块”，“层叠上下文”有一定的理解基础。下面简要的回顾一下这些基础概念：
-
块元素：
浏览器中默认能够独占一行的元素，对于块元素，只有当其width:auto的时候才具有流动性，一旦width设置了具体数值其流动性就会消失。
-
盒子模型
对于每一个前端人来说，对盒子模型的认识应该不陌生，每一个元素都可以看成是一个盒子模型。每一个盒子模型由都是由：content-box/padding-box/border-box/margin-box组成。
对于一个盒子模型，熟悉其content-box与border-box特性对于在布局定位过程中元素的尺寸设定有很大的帮助。
值得注意的是对于IE浏览器，对一个盒子的box-sizing属性是CSS3才有的，IE8以上的的才会起效，而且IE8还要添加前缀-ms-，等到IE9的时候就不再需要前缀了。
对于content-box与border-box的区别:
对于box-sizing：content-box;width:100px;其宽度就是里面的那个盒子的宽度，而border-box就是包括了外面的灰色盒子宽度。
- BFC
BFC(Block Fromatting Context):块级上下文；实际上它还有一个兄弟，叫IFC(Inline Fromatting Context):行内上下文，只不过IFC对页面布局的影响微妙，而且对元素的影响也很小，因此对其的关注也不高。
W3C的官方解释是：BFC决定了元素如何进行内容定位，以及其他元素的关系和相互作用，当涉及到可视化布局时，BFC提供一个可以不受外界元素影响的环境，使得HTML在这个环境中按规定进行布局；换句话就是将页面元素模块化。
触发BFC的CSS元素有：
overflow:hidden;
display:inline-block;
position:flexd
position:absolute
display:table-cell
dispaly:flex
一个非块元素设置成为一个BFC就成为了块级元素，就会具有块元素的特性。 - 包含块
什么是包含块，元素的尺寸以及位置，常常会受其包含块的影响。而包含块的确定完全依赖与元素的position属性：
1、如果元素的position属性是static、relative、sticky,则包含块是由它最近的祖先块元素的content-box边缘组成。
2、如果元素的position属性是absolute,则包含块由它最近的position属性值不为static的祖先元素的padding-box边缘组成。
3、如果元素的position属性是fixed，在连续媒体的情况下包含块是viewport,在分页媒体下的情况下包含块是分页区域。
4、如果position属性是absolute或fixed，包含块也可能是有满足以下条件的最近父元素的padding-box边缘组成：
（1）transform或perspective的值不为none;
（2）will-change的值是transform或perspective
（3）filter的值不是none或will-change的值是filter(只有在firefox下生效)
（4）contain的值是paint；
值得注意的是：根元素所在包含块是一个被称为初始包含块的矩形。它的尺寸视口viewport或分页媒体page media. - 层叠上下文
对于层叠上下文，主要是z-index属性的设定，默认情况下z-index的值会是auto/0,有数值的情况下就看数值的大小而定。
“流”布局的运用
在了解了上述元素的一些基本特性之后，对于“流布局”的运用就可以拉开帷幕了。
要想元素随着浏览器可视界面展现流的特性，可以对其父元素的宽或者高不进行准确数值设定，让其动态添加子元素，比如在一些购物网站中最常见到的“瀑布流”商品信息就是不对其父元素设定高度，其子元素无限的增加，父元素也可以将其包含住。
在“流布局”中最常用的手法就是定位属性与margin的结合使用，在一个模块中，设置目标元素的定位属性为absolute，则根据绝对定位的特性，对其设定margin值就会相对父元素左上角进行偏移margin:auto会自动平分剩余空间。
对高度不确定的布局，其父元素一般不会设定高度，连height:auto/0都不必写，父元素内的子元素浮动布局定位，最后再对父元素清除浮动即可；
最后也是最重要的一点是，流布局，个人理解就是要将网页的元素组件模块化，将一个个元素变成一个个模块，如果是行内元素就在其外套一层
文章写得可能由于笔者经历原因而稍显浅薄，欢迎大家批评指正。