css布局方案和机制大全

本文章主要系统性讲解和汇总css与布局相关的知识，便于大家后续查阅和讨论。

整体而言，css布局的技术，主要与display、table、float相关，如果去除table布局，则核心是display与float属性之间的结合使用，来达到多样化的页面布局效果。

布局的核心是处理纵向和横向分布的问题，对于纵向而言，直接使用块级元素，按照标准文档流进行布局即可。对于横向而言，因为原则性块级元素独占一行，故本质需要通过触发BFC机制实现，即让某些块级元素脱离正常文档流（其实正常文档流本身是一个根BFC），然后实现一行多列的布局效果，至于触发BFC的方法，则主要是通过display、float和position完成，当然overflow也可以触发BFC，但一般不会作为主要布局机制使用，仅仅用来辅助解决因子元素脱离文档流导致父元素高度塌陷、margin传递等问题时使用。

整体而言，主要有以下7种页面布局方式和机制：

一、display：block与float结合布局

说明：常用布局方法，主要使用float形成BFC实现一行多列布局。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#float{
    width:100%;
    height: 300px;
    clear:both;
}
.float-l{
    width:200px;
    height: 100%;
    float: left;
}
.float-c{
    width:calc(100% - 400px);
    height: 100%;
    float: left;
}
.float-r{
    width:200px;
    height: 100%;
    float: left;
}

HTML结构：

<div id="float">
    <div class="float-l"></div>
    <div class="float-c"></div>
    <div class="float-r"></div>
</div>

二、display:inline-block布局

说明：不经常使用，主要使用inline-block行排列特性，且因为是inline-block，需在父容器内将默认font-size设置为0px;

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#inline-block{
    width: 100%;
    height: 300px;
    font-size: 0px;
    clear: both;
}
.inline-l{
    width:200px;
    height: 100%;
    display:inline-block;
}
.inline-c{
    width:calc(100% - 400px);
    height: 100%;
    display:inline-block;
}
.inline-r{
    width:200px;
    height: 100%;
    display:inline-block;
}

HTML结构：

<div id="inline-block">
    <div class="inline-l"></div>
    <div class="inline-c"></div>
    <div class="inline-r"></div>
</div>

三、display:flex布局

说明：经常使用，主要使用flex特性，且在多列按比例分配横向宽度时，不用计算，非常方便。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#flex{
    width: 100%;
    height: 300px;
    display:flex;
    clear: both;
}
.flex-l{
    width:200px;
    height: 100%;
}
.flex-c{
    flex:1;/*为1时，会自动填充横向剩余宽度*/
    height: 100%;
}
.flex-r{
    width:200px;
    height: 100%;
}

HTML结构：

<div id="flex">
    <div class="flex-l"></div>
    <div class="flex-c"></div>
    <div class="flex-r"></div>
</div>

四、display:grid布局

说明：css3中网格系统，非常强大，能高效实现很复杂的多行多列布局，类似使用table布局，但更为直观和方便，可通过设置grid-template-areas并与grid-area结合来实现布局，而不用使用colspan属性，并有很多其他丰富功能，此处不展开讲解，可自行深入学习。使用grid能很方便的实现常规的多列布局。

其结合了table和flex的所有优点，可使用相对单位fr很方便的进行多列宽度自适应分配。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#grid{
    width: 100%;
    height: 300px;
    display:grid;
    clear: both;
    grid-template-columns:200px 1fr 200px; /*1fr会自动填充横向剩余宽度*/
    grid-template-areas:'a1' 'a2' 'a3';
}
.grid-l{
    grid-area:'a1';
}
.grid-c{
    grid-area:'a2';
}
.grid-r{
    grid-area:'a3';
}

HTML结构：

<div id="grid">
    <div class="grid-l"></div>
    <div class="grid-c"></div>
    <div class="grid-r"></div>
</div>

五、display:table布局

说明：该display类型主要是模拟了古老的table标签布局，可以搭配display中的table-cell、table-column、table-row进行详细布局，类似table中的td、tr，但是使用起来更加直观。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#display-table{
    width: 100%;
    height: 300px;
    display:table;
    clear: both;
}
.table-l{
    display:table-cell;
    width:200px;
}
.table-c{
    display:table-cell;
    width:calc(100% - 400px);
}
.table-r{
    display:table-cell;
    width:200px;
}

HTML结构：

<div id="display-table">
    <div class="table-l"></div>
    <div class="table-c"></div>
    <div class="table-r"></div>
</div>

六、table标签布局

说明：该种布局方式，直接使用table标签，但因table标签本来是用来展示表格类，故此种方法现在较少使用，推荐使用以上几种布局方式，而让table标签回归其本位。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

table{
    width:100%;
    border-spacing:0px; /*去除table列间距*/
    border-collapse: collapse;
}
#table{
    height: 300px;
}
.t-l{
    width:200px;
}
.t-c{
    width:calc(100% - 400px); /*通过计算自适应宽度*/
}
.t-r{
    width:200px;
}

HTML结构：

 <table>
     <tr id="table">
        <td class="t-l"></td>
        <td class="t-c"></td>
        <td class="t-r"></td>
    </tr>
 </table>

七、使用position进行布局

说明：该种布局方式，主要使用position的relative与absolute，通过定位来实现布局，不建议使用该布局方法进行页面整体布局，可作为局部区域布局的方案。

效果：实现一行三列布局，左右固定宽度，中间自适应宽度

css样式：

#position{
    height: 300px;
    width:100%;
    position:relative; /*让子div相对父div进行定位*/
}
.p-l{
    position:absolute;
    width:200px;
    height:100%;
    left:0px;
}
.p-c{
    position:absolute;
    left:200px;
    width:calc(100% - 400px); /*通过计算自适应宽度*/
    height:100%;
}
.p-r{
    position:absolute;
    width:200px;
    height:100%;
    right:0px;
}

HTML结构：

<div id="position">
    <div class="p-l"></div>
    <div class="p-c"></div>
    <div class="p-r"></div>
</div>

以上为页面整体布局相关方案和机制，当然，以上均可以进行相互嵌套实现更复杂的布局，但整体来说，核心机制是一样的。

当然，如果能把css3中的grid网格系统熟练掌握，则再复杂的布局也能快速搞定，且通过布局知识，可以更加深入理解文档流和BFC核心概念。

以上布局机制，总结为表格如下：

布局方案\属性	标签	父元素display	父元素position	子元素float	子元素postion	子元素margin	子元素width	子元素其他	备注
方案1	div	block		left or right		位置微调	指定宽度px或%		常用
方案2	div	inline-block				位置微调	指定宽度px或%或calc		不太常用
方案3	div	flex				位置微调	指定宽度px或%或flex1		常用--自适应流式布局
方案4	table						指定类宽px或%		不建议使用
方案5	div	grid-划分区域					指定宽度px或%或fr	grid-area	最强大，各种布局均可轻松实现
方案6	div	table							不太常用
方案7	div		reative		absolute				在需要精准定位布局时使用
说明：	以上方案一般都是用于页面整体布局，但也可以嵌套使用，

后续可再熟练掌握对齐等相关操作，则HTML页面布局便能轻松搞定。