前言

本文所提供的解决方案并不是唯一正确答案，前端这条路没什么唯一的解决方案，能实现功能就是好的方案。本文只是提供一个解决问题的思路，遇到问题应该考虑哪些方面，在当下的情况下，应该采取的最佳的方案。希望各位读者能尝试不同的解决方案，一起探讨，共同进步。

这章涉及的是布局内容，position，浮动等，这个task还是挺重要的，写到中途才发现，有许多小的知识点，所以建议阅读本文之前，先弄懂几个问题。

1. 浮动产生的原因以及如何消除，另外分别比较几个方法的弊病和解决办法。
2. 理解position的几个属性，仔细思考如果是你来设计网页，这几种属性会在何种情况下用到。
   注：如果仅仅是看了看概念其实并没有理解position。
3. BFC的原理
4. 理解弹性盒子模型及其用法

下面几个网站是锦囊，读者可以从这些网址中找出线索，看完之后，要加以实践和体会，方能解答。

• 张鑫旭探究float系列文章
• 拜拜了浮动布局-基于displayinline-block的列表布局
• inline-block-space-remove-去除间距
• CSS的display: inline; float: left 是否等于display: inline-block?
• CSS深入理解流体特性和BFC特性下多栏自适应布局
• 10 分钟理解 BFC 原理
• CSS Layout
• 我熟知的三种三栏网页宽度自适应布局方法
• Visual formatting model

坑点

右边栏布局的问题

这里涉及到对与盒模型的理解的问题，当你设置三个纵向排列的方块的时候，旁边有间隔，你会想到利用方块的margin还是外层的padding?当你用padding的时候，你如果用正常的盒模型，你会发现一个问题，当你设置width为120的时候，padding为20，这个时候宽度变为了140，因为正常的盒模型的width其实是不包括padding的，所以如果你理解的盒模型，这个时候你想有没有一种方法能直接设置width而不用管其它的设置和计算，这时候就有box-sizing里面的border-box属性了。然后对于里面的方块，直接设置margin-bottom即可，是不是又方便了许多。

中间栏宽度自适应的问题

这个问题前期的做法，左边栏使用float:left，右边栏使用float:right的方法，然后中间栏使用固定位置，虽然是能跟随浏览器的宽度进行宽度的变化了(这里有个问题需要让各位读者思考下，为什么对于中间栏的margin的设置是相对于父元素来计算的?)。后来考虑了下，当左右边栏宽度改变的时候，margin还要重新进行计算，不太方便。理想的情况应该是它最亲近的对象应该是左右，就是说，无论左右边栏宽度怎么变化，只要有它跟左右的间隔，它的宽度就能确定。后来采用的是flex布局方式，很灵活，而且不用改动很多东西。问题是缩小到一定的比例，整个布局会不太好看，所以结合媒体查询的方式，当缩小到一定布局的时候，固定布局。
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

如何让整体高度适应三栏中最高的高度

如果你用的是float:left的方法布局的话，你直接采用overflow:hidden的方法即可，清除浮动。让整体高度跟随容器内最高的那个，这个需要你对bfc和float有一个详细的了解。如果你采用flex的方法布局，不需要做什么改动。

padding还是margin这是一个问题

虽然提示是利用padding20来计算，但是你会发现你用margin也可以替换padding来，这时候有个选择的问题了，你要怎么选择这两个属性呢？padding 还是margin傻傻分不清楚。
点击求助场外观众
由浅入深漫谈margin属性
我知道你不知道的负Margin
看完之后请回答问题：外边距叠加的原因？