前端经常使用布局

一、水平居中

方法一：margin:0 auto；

是最多见的水平居中解决方案，但有其局限性：块级元素，已知宽度，父级元素有宽度

方法二：text-align + inline-block

在父级元素上设置text-align：center;将须要居中的元素设置为inline-block（或inline）

方法三：position绝对定位

对于须要居中的元素：

position:absolute;(同时设置父级元素relative) 
left:50%;(包括了元素自己的宽度)
transform:translateX(-50%);

局限性：CSS3属性兼容性很差

方法四：flex弹性布局之justify-content

做用于父级元素

#parent{
  display:flex;
  justify-content:center;`
}

二、垂直居中

方法一：height +line-height

对于一个须要居中的 行内（块）元素 ，设置父元素的高度与行高相等，便可实现垂直居中

方法二：table-cell + vertical-align

.parent{
  display:table-cell;
  vertical-align:middle
}

方法三：absolute+transform

相似于水平居中

方法四：flex+align-items

相似于水平居中

.parent{
  display:flex;
  align-items:center;
}

三、左边固定右边自适应

HTML
<div class="left"></div>
<div class="right"></div>

CSS
.left{
    float:left;
    width: 200px;
    height:400px;
    background-color: blue;
}

.right{
    height:400px;
    background-color: red;
        margin-left:210px;
}

四、右边固定左边自适应

方法与 状况三 相似，但有一点须要注意：不管是哪一种状况，再html结构中，都要把浮动块写在前面，不然浮动块会被挤到下一行。

HTML
<div class="right"></div>
<div class="left"></div>

CSS
.left{
    height:400px;
    background-color: red;
        margin-right:210px;
}

.right{
    float:right;
    width: 200px;
    height:400px;
    background-color: blue;
}

五、两边固定中间自适应

相似于两栏布局，一样是浮动栏先渲染：

HTML:
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
CSS:
.left{
    float:left;
    width: 200px;
    height:400px;
    background-color: red;
}

.right{
    float:right;
    width:200px;
    height:400px;
    background-color: blue;
}
.middle{
    height: 400px;
    background-color: yellow;
    margin:0 210px 0 210px;
}

但在实际状况下，中间栏才是主要内容，须要优先渲染，也就是说，DOM结构中，中间栏须要写在最前面，可是上文中提到过，浮动块必须写在最前面；解决方案是：三栏全浮动。
有如下两种经典的布局方式，它们的共同点是：固比固布局，中间栏放到文档流前面，保证先行渲染。
实现方式是：三栏所有float:left浮动。
区别在于解决中间栏div的内容不被遮挡上：圣杯布局是在父级添加左右padding，将三栏所有挤到中间，而后在两侧边栏添加相对定位，配合left和right属性，将它们挪向两边，为中间内容腾出位置；而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，对嵌套的div设置margin-left和margin-right。

5.1 圣杯布局

HTML:
<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
CSS:
.container{
    overflow:hidden;
    padding:0 200px;
}
.middle{
    width:100%;
    height:400px;
    float:left;
    background-color: yellow;
}
.left{
    width:200px;
    height:400px;
    float:left;
    background-color: blue;
    margin-left:-100%;（挤上去）
    position:relative;
    left:-200px;
}
.right{
    width:200px;
    height:400px;
    float:left;
    background-color: darkseagreen;
    margin-left:-200px;（挤上去）
    position:relative;
    right:-200px;
}
/*
解决遮挡的代码是：
.container中 padding:0 200px;
.left中 position:relative;left:-200px;
.right中 position:relative;right:-200px;
*/

5.2 双飞翼布局

HTML:
<div class="container">
    <div class="middle">
                 <div id="inside">middle</div>
        </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
CSS:
.container{
    overflow:hidden;
}
.middle{
    width:100%;
    height:400px;
    float:left;
    background-color: yellow;
}
.left{
    width:200px;
    height:400px;
    float:left;
    background-color: blue;
    margin-left:-100%;（挤上去）
}
.right{
    width:200px;
    height:400px;
    float:left;
    background-color: darkseagreen;
    margin-left:-200px;（挤上去）
}
/*解决遮挡*/
#inside{
    margin:0 210px;
    height:400px;
    background-color:red;
}

如图：

清除浮动

因为上述布局不少用到了浮动，为了消除浮动元素对于其它元素布局的影响，就必须清除浮动。

浮动会致使的问题：

一、父级元素不能正常撑开
二、背景不能正常显示
三、margin不能正确显示
etc..

清除浮动的部分方法：

一、在浮动元素的同级，增长一个空元素，并给该空元素设置clear:both;
二、在父级元素上设置overflow:auto;zoom:1
三、在父级添加伪元素after:after{content:"";display:block;clear:both;}

最后一点

上文中提到的两栏布局，都是优先加载了浮动栏，若要内容栏优先，能够参考双飞翼布局和圣杯布局，实现方式是同样的。 或者换一种思路：以前咱们浮动的是固定栏，如今能够浮动自适应栏，以左栏固定右栏自适应为例：设置右栏100%，右浮动；而后再写左边栏。