前端常用布局

1、水平居中

方法一：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;`
}

2、垂直居中

方法一：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;
}

3、左边固定右边自适应

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;
}

4、右边固定左边自适应

方法与 情况三 类似，但有一点需要注意：无论是哪种情况，再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;
}

5、两边固定中间自适应

类似于两栏布局，同样是浮动栏先渲染：

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;
}

如图：

清除浮动

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

浮动会导致的问题：

1、父级元素不能正常撑开
2、背景不能正常显示
3、margin不能正确显示
etc..

清除浮动的部分方法：

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

最后一点

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