三栏布局原理水坑

一、浮动布局

这个比较简单，直接通过左右浮动两个固定宽度的div即可，中间的div只需要左右margin一个等同固定宽度的值即可，padding也可以，不过看起来不是个完整的中间自适应，两边的padding的部分还是属于div的，放背景图，边框就会有问题了
布局格式：一个大盒子里面包裹三个div，中间的div放在最后

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

二、BFC布局

这个其实跟浮动布局没什么两样，唯一的区别就是中间div不再是margin或者padding，而是通过overflow:hidden;来实现隐藏超出部分

三、双飞翼布局

双飞翼布局其实就是给一个浮动的大盒子左右两边装两个“翅膀”，原理还是float+margin
这个感觉给大盒子padding，或者是大盒子里面的div加margin都是一样的
然后大盒子和两个翅膀同时左浮动，同时左浮动，同时左浮动，这样理论上就是同一行，但是由于大盒子给了宽100%，这样翅膀挤下去了
这时给左边盒子margin-left: -100%;为什么是100%，因为大盒子宽100%，为什么是负的，因为负数往左越来越近，正数往右越来越远
这时给右边盒子margin-left: -盒子宽度;，是移动盒子的宽度，把自己刚好移进去

<div class="container">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>

四、圣杯布局

圣杯布局就是就是在双飞翼布局的基础上升华了一下，因为双飞翼布局跟正常的三栏布局方式不一样，所以需要修正回来
把双飞翼的两个翅膀重新放回大盒子里面，不过注意，中间盒子最前面，中间盒子最前面，中间盒子最前面，因为float的特性就是后面的盒子跟随前面的浮动
大盒子给个padding或者margin都无所谓，（建议统一margin，我也不知道为什么），然后中间盒子宽100%，注意双飞翼是大盒子100%
然后给左margin-left:-100%;发现到了中间盒子的最左边，但是并没有到大盒子的最左边，这时候就可以通过position: relative;来移动到最左边，同理右也是一样的

<div class="container">
      <div class="auto">居中自动</div>
      <div class="left">左</div>
      <div class="right">右</div>
</div>

五、flexbox布局

这个应该是最简单的了
直接给大盒子display: flex;，里面左右盒子固定宽度，中间盒子给个flex:1;即可，这里就不要注意三个div的顺序了，直接按照正常顺序来

<div class="container">
      <div class="left">左</div>
      <div class="auto">居中自动</div>
      <div class="right">右</div>
</div>

六、table布局

其实跟flexbox布局差不多，只不过大盒子不是flex，而是table，三个div设置display: table-cell;，就可以了

七、定位布局

给大盒子也就是父元素一个相对定位，左右两个盒子绝对定位即可，大盒子padding，或者中间盒子margin都可以

转载于:https://www.cnblogs.com/zjh-study/p/10825810.html