在用 CSS 对网页进行排版、美化的时候，首要的工作就是要对各个 HTML 元素进行合理的布局，使网页的各部分内容结构明朗、层次清晰。
在对元素进行布局的时候，通常会有左（中）右布局、水平居中、垂直居中等需求，本文简要介绍一下实现这些布局的方法。
在这之前，首先要知道的一点就是 HTML 有两种元素，块级元素和内联元素。块级元素永远会单独占用一行，一般用于结构，内联元素可以出现在同一行，所以一般用于展示文本内容。
内联元素的宽度由其文字长度决定，高度也是由其字体决定，我们无法人为去设置宽高。而块级元素的宽度和高度都会自适应，宽度默认会填满其父元素，高度则由其内部文档流的高度总和确定，虽然我们可以人为去设置块级元素的宽高，但是不到万不得已，一般都不要这么做。
一、水平布局
我们通常会用块级元素去定义结构，然而每个块级元素都会占用单独的一行，怎么才能让这些块级元素在同一行显示呢？
常用的方法就是让这些元素全部浮动。
比如，我们要制作一个水平的导航条，先定义一个无序列表：
<ul class="clearfix">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
我们给每一个<li>添加 CSS float: left;，这样所有的<li>都会在一行显示。但是这样做以后其下方的元素也会跑到上面来，那是因为 float 的元素会脱离文档流，通常再给<li>的父元素添加类名clearfix解决，clearfix的 CSS 代码如下：
.clearfix::after {
content: '';
display: block;
clear: both;
}
这样的写法其实已经成为了一种约定俗成，通常不必要再取其他的类名了。
二、水平居中
1、块级元素
如果一个块级元素被人为设置了宽度，即它的宽度已经确定，那么就可以给它添加以下 CSS 使其在所在行居中显示。
margin-left: auto;
margin-right: auto;
这种方法只适合于确定了宽度的块级元素，虽然不建议为一个元素设置宽高，但是我们可以给它设置一个最大宽度，这样以上的居中方法也是有效的。
如果实在无法确定块级元素的宽度，可以用display: inline-block;进行转换，然后用内联元素的居中方法将其水平居中
2、内联元素
内联元素通常都出现在块级元素中，只需给父元素添加text-align: center;即可使其居中显示。如果它没有父元素，给它外面套一个就好了。
注：
text-align: center;只对子代的内联元素有效，对块级元素是无效的。
对于单一的内联元素，因为其宽度就是文字的长度，可以给它添加左右相同大小的 padding，这样在它自己的盒子中看上去就是居中的了。
三、垂直居中
1、块级元素
对于块级元素，给其父元素添加上下相同的 padding，即可让其在父级元素中居中。
2、内联元素
对于内联元素，给其父元素设置适当的 line-height、以及上下相同的 padding，即可让其在父元素中垂直居中。设置的时候，尽量保证 line-height 的值稍大于内联元素的实际高度（字号、图像高度等）。
例如，我们将一个 div 中的一行字垂直居中，div 的 CSS 可以这样写：
border: 1px solid red;
line-height: 20px;
font-size: 18px;
padding: 20px 0;
结果：
(完)
