两栏自适应布局延展到多栏自适应布局

一、网上不少文章了，为何还要讲？

 　　说到两栏自适应布局，估计不少人看到这样相似的文章，我常常也看过，可是那些实现方式跟我所常用的两种方法不同，常用的意思是，我一遇到这种布局，立马想到的就是使用这种。就像咱们拿东西，咱们立马就会想到用手拿，固然还有不少方式能够拿到，好比用嘴刁。 因此，当咱们看到多种实现方式的时候，必定要学会比较，而后选择其中一两种做为经常使用布局记到深处，就是想都不用想就用的。 

二、先看效果，本身先看看，若是懂了，就不要看其余解释文字了， 节约时间

See the Pen Layouts by wenjie (@wenjie) on CodePen.

点击右上角那个 CodePen Logo能够在新页面看，大点看对眼睛好

3 、解释一下　

　　overflow方式主要原理： 固定宽度（block设置了宽度，或者inline-block元素本身的宽度）那一块浮动起来，放在最前面；自适应那一块必定要放在最后，宽度不能设置即宽度要为auto，设置overflow为hidden或者scroll等（目的造成BFC。overflow为visible不能造成BFC，其余均可以，本身能够搜索文章看看）。

       table-cel l方式主要原理：原理跟overflow相似，惟一不一样的是它设置了一个很大很大的宽度，因为table-cell有本身的最大宽度，因此咱们设置很大是为了 到达它的最大宽度，也就是浏览器的边缘吧。

      margin负值在网上写得风生水起，但我的不是很喜欢使用，我认为它的惟一优势就是能把自适应内容的标签放在了最前面 ，使SEO更友好，由于SEO一进来就获取到了最重要的内容。 但margin负值会增长更多的难度，设置甚至排查问题可能会花更多时间。因此margin负值我就是学一学的姿态，用不用取决于心情。

四、 多栏布局

     延展到多栏布局，是同样的，其实没啥可说的，就是把全部固定宽度的栏目放在最前面浮动起来，把自适应的部分放在最后便可。

五、几点地方要注意

      由于用了浮动，因此记得父容器清除浮动，好比我直接用overflow:auto清除浮动、也能够用咱们常写的 class=clearfix。

      若是是英文网站或者文章里面有英文 还要考虑长英文单词的时候，这个时候若是单词在边缘就会被截断，这个时候，自适应的容器就要加上 word-wrap: break-word; 进行处理。

六、其余几种方式

      还有其余不少不少种方式，你们随便一搜就能搜到，好比CSS3的 calc(100% - x)这个其实我在移动端也常用，它的缺点就是旧版浏览器的兼容问题。

七、工做繁忙，没啥时间，文章粗糙

     文章中可能有错别字形成难以理解的，也请指出，若不影响你们吸取主要内容就算了吧，O(∩_∩)O哈哈~，如有知识性错误请不要吝啬指正，提早感谢。