关于文档流

理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：

1. 从左至右，从上至上的布局。
2. 符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。

下面来讲一个css中的定位机制，共三种：

1. 正常的文档流
2. float
3. postion
4. margin大法

在这几种定位机制中，有几种方式是脱离文档流的。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。
脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清楚掉了。
那么，这几种脱离文档的的定位机制包括哪些呢？

1. float
2. position：absolute

关于布局

1. 左右布局

1. 浮动法
   html代码片段：

<div class="parent">
      <div class="left"></div>
      <div class="right"></div>
</div>

• 设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：
  css代码片段：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.left,
.right{
  float:left;
}

2. marign-left边距法

.left{
 margin-left:0;
}
.right{
margin-left:300px;
}

• 通过margin来分离两个盒子的距离。

3. 定位法

• 设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：

.parent{
  position:relative;
}  
.left{
  position:absolute;
  left:0;
  top:0;
}
.right{
  position:absolute;
  left:200px;
  top:0;
}

2. 左中右布局

1. 浮动法
   html代码片段：

<div class="parent">
      <div class="left"></div>
      <div class="mid"></div>
      <div class="right"></div>
</div>

css代码片段：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.left,
.mid,
.right{
  float:left;
}

2. marign-left边距法

• 依次调整中和右的距离。

3. 定位法

• 同左右布局，设置自己想要的布局距离。

3. 水平居中

关于文字居中:
html代码片段：

<p class="hellow">你好</p>

CSS代码片段：

hellow{
  text-align:center；
  height:12px;
  line-heigth:12px;
}

关于盒子模型居中：
html代码片段：

<div class="box">123</div>

css代码片段：

.box{
 margin:0 auto；
 }

4. 垂直居中

• vertical-align：top;垂直居中法；
• 定位法
• margin-left

5.等其他小技巧

1. clearfix清楚浮动：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

2. 关于伪类：
   ::after；::before 可以看子元素div，但是必须写content:"";

<div>
     <div></div>
</div>