常见 CSS 布局

要掌握 css 布局，必须先知道下面的几个术语，这个很重要！！！

文档流： 文档内元素的流动方向。

内联元素： 从左往右流动，如果流动遇到阻碍就换行继续流

块级元素： 每一个块占一行，如果还有块就从上往下流动

本文主要讲述以下效果的实现：

左右布局
左中右布局
水平居中
垂直居中

左右布局

给出 html 结构如下：

<div class="father clearfix">
	<div class="son"></div>
    <div class="girl"></div>
</div>

第一种： 采用浮动 float 方式

要实现左右布局的效果，两个子 div 都设置 float 值。

给出 css 代码如下：

.clearfix::after {	 /*清除浮动*/
    content: "";
    display: block;
    clear: both;
}
.father {
    width: 100%;
    border: 1px solid red;
    height: 200px;
    margin-bottom: 20px;
}
.son {
    background: blue;
    float: left;
    height: 200px;
    width: 50%;
}
.girl {
    background: green;
    float: right;
    height: 200px;
    width: 50%;
}

注意： 给子元素设置了 float 值，父级元素一定要清空浮动。

第二种： position 定位

css 代码如下：

.father {
    border: 1px solid #000;
    width: 100%;
    height: 200px;
    position: relative;
}
.son,
.girl {
    position: absolute;
}
.son {
    width: 30%;
    height: 200px;
    background: red;
    top: 0;
    left: 0;
}
.girl {
    width: 70%;
    height: 200px;
    background:pink;
    top: 0;
    left: 30%;
}

根据上面的代码，相应的给 div 设置 left 和 top 值，即可以实现效果。

左中右布局

圣杯布局和双飞翼布局，网上可以搜到很多文章，推荐一篇文章：css 布局方式

参考链接：我熟知的三种三栏网页宽度自适应布局方法

垂直居中

详情见：css 垂直居中的 8 种方式

通过line-height实现CSS垂直居中。(设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况)
通过verticle-align:middle实现CSS垂直居中。(通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。)

水平居中

详情见：css 水平居中的 9 种方式

通过margin:0 auto;text-align:center; 实现 css 水平居中（最为常见的居中方式）
通过position:absolute;实现 css 水平居中。
通过display:inline-block;和text-align:center;实现 css 水平居中

CSS布局