CSS常见布局

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

1.float+overflow:hidden



    左栏
    右栏

2.flex布局



    左栏
    右栏

3.grid布局



    左栏
    右栏

三栏布局——两边固定宽度中间自适应

1.float布局

float布局使用时注意清除浮动。



    左边
    右边
    中间

2.Position 布局

Position布局只是根据定位属性去直接设置元素位置。不推荐使用



    左边
    中间
    右边

3.Flex 布局

flex布局比较强大,只能支持到 IE10及以上。



    左边
    中间
    右边

4.table 布局

table布局使用起来方便,没有兼容性也不存在问题，但使用不方便

 

    左边
    中间
    右边

5.grid布局

grid布局很强大，但是兼容性很差。



    左边
    右边
    中间

圣杯布局

三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；


  
  Title
  



  中间
  左边
  右边

缺点:
center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)

双飞翼布局

实现步骤(前两步与圣杯布局一样)
三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层div，并设margin: 0 200px；

缺点
多加一层 dom 树节点，增加渲染树生成的计算量。

多列等高布局——圣杯布局

实现步骤：
1.三部分都设定为浮动，设置center的宽度为100%。
2.设置 left 和 right的margin-left为负值让left和right部分回到与center部分同一行。
3.设置相对定位，让left和right部分移动到两边。
4.伪等高布局

.container {
    overflow: hidden;//把溢出背景切掉
}
.center,.left,.right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

示例：



    中间
    左边
    右边

粘连布局

描述：
有一块内容

，当

的高度足够长的时候，紧跟在

后面的元素

会跟在

元素的后面。当

元素比较短的时候(比如小于屏幕的高度),我们期望这个

元素能够“粘连”在屏幕的底部。
实现步骤：