布局

两栏布局（bfc）demo

原理：BFC的区域不会与float box重叠。通过触发main生成BFC， 来实现自适应两栏布局。

said定宽，main不定宽，自动填补

但是会有个问题：为何给body设置border之后参见demo

父元素添加border之后main下移

补坑解释：

外边距折叠(margin collapse) 发生的场景是，同一个块级盒子布局上下文(BFC)中相邻的次方向外边距会折叠

发生合并

box2没有padding和border那么，box1 box2 box3的margin就要折叠，但是如果 box2 有padding或border，那么内部box3的margin就被隔开了，就只有box1 box2margin参与折叠

加上border之后参见demo

加上border之后

这可能就是给body加border会出现不合并的原因了吧。

但是一般来讲会给加一个 padding-top:1px 来解决。

其他方式的两栏布局
。。。。。

三栏 （负margin思想）

涉及浮动和清除浮动，主要“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

• 圣杯布局 demo

  第一步：给出页面结构以及各个盒子的具体样式

<header>header内容区域</header>
  <div class="container">
        <div class="middle">我是中间弹性布局</div>
        <div class="left">left</div>
        <div class="right">right</div>
  </div>
  <footer>footer内容区</footer>

body{ min-width:700px;}//当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: green;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}

效果图

可以看到左右两栏并没有在父元素的一行显示，因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来。
如果中间盒子不是100%的宽度，那么按照文档流，左边的盒子一定会在中间盒子的后面显示，接着显示右边的盒子。但是现在中间盒子是满屏了的，所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时，CSS的负边距(negative margin)该上阵了。

第二步:利用负margin布局

.left {margin-left:-100%;}为负的中间盒子的宽度,左盒子往最左边移动。
.right {margin-left：-200px;}为负的自己的宽度,右盒子才可以在一行的最右边显示出自己。

效果图
但是如果给中间盒子加很多内容，就会被左右盒子挡住。如图：

第三步：让中间自适应的盒子安全显示

• 首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。.container{ padding: 0 200px;}这里的200px是左右盒子的宽度。
  

  利用父级的内边距将盒子往中间挤

• 其次:给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。
  .left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;}
  

  圣杯布局

• 双飞翼布局Demo

第一步：给出页面结构以及各个盒子的具体样式

<header>header内容区域</header>
  <div class="container">
    <div class="middle">
       <div class="middle-inner">我是中间弹性布局</div></div>
       <div class="left">left</div>
       <div class="right">right</div>
  </div>
  </div>
  <footer>footer内容区</footer>

header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: green;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}

效果图

第二步：跟圣杯布局一样，利用负margin布局

效果图

但是仍然被挡住，如何让中间一栏自适应呢？

第三步：中间盒子里面再添加一个 div

.middle-inner{margin:0 200px;}这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

双飞翼布局

圣杯和双飞翼异同:

两边定宽，中间自适应的三栏布局的解决方式，中间栏要在放在文档流前面以优先渲染。

• 两种方法基本思路都相同：三栏全部 float 浮动。首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
• 主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：
  • 圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；
  • 双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

简单来说：双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

关于负margin的用法

总结有几点：

• 不使用 float 的话，负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素，所有跟随的元素都会被上移(而 relative 定位的元素则不同，会保留原位置，影响文档流) 。

• 当 static 元素的 margin-top/margin-left 被赋予负值时，元素将被拉进指定的方向。

• 如果你设置 margin-bottom/right 为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

• 当元素不存在 width 属性或者 width: auto 的时候，负 margin 会增加元素的宽度. Link
  

  

• margin-top 为负值不会增加高度，只会产生向上位移;margin-bottom 为负值不会产生位移，会减少自身的供 CSS 读取的高度，影响下方的元素位置；上下相邻的元素两者均为负时，效果不叠加，取负值更多的那个效果。(也即外边距合并)

本文参考链接CSS 布局经典问题初步整理