有关文档流的一些注意事项

一、文本在盒子中垂直居中对齐

通过给文本设置行高达到垂直居中对齐效果

二、使用步骤

代码如下（示例）：

div {
	height:20px;
	line-height:20px;
	}

在给文字的行高设置为与盒子高度相同时，实现垂直居中效果

---

一、标准流中行内块元素之间会有缝隙

在给盒子添加浮动后可以消除缝隙

div {
            width: 150px;
            height: 200px;
            background-color: pink;
            /* 在标准流中为了让三个div在同一行中显示 会将其转换为行内块元素 */
            /* display: inline-block; */
            /* 但是他们中间会出现缝隙 */
            /* 使用浮动 则不会出现缝隙 */
            float: left;
            /* 网页布局第一准则 多个块级元素纵向排列用标准流 多个块级元素横向排列用浮动 */
        }

二、清除浮动

在很多情况下，盒子不方便给高度，为的是在以后维护的时候继续添加元素，所以不会把盒子的高度定死，而是通过子盒子本身的高度将父盒子撑大。但是子盒子通常时浮动的，浮动的盒子不占有体积，所以会导致下面的盒子顶上来。这时就需要清除浮动。
以下有四种清除浮动的方法。

  /* 通俗易懂 书写方便  但是多了无意义代码 实际开发中不常用
新增的盒子要求必须是块级元素不能是行内元素 */
        .clear {
            clear: both;
        }

第一种方法，给最后的一个盒子添加以上代码。

.box {
            width: 900px;
            background-color: pink;
            margin: 0 auto;
            /* 给父级盒子添加代码清除浮动
            代码简洁 但是无法显示溢出的部分 */
            overflow: hidden;
        }

第二种方法，给父盒子添加overflow：hidden 缺点是会导致溢出部分显示不出来

/* 额外标签法的升级版 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* 为了照顾低版本浏览器 */
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

第三种方法，给父盒子添加标签 clearfix 在样式中写上上述代码

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

第四种方法，与第三中方法用法相同。
第三种和第四种是开发中常用的方法。