上篇文章介绍了CSS代码的引入方式，今天列举下CSS的两种布局clearfix和position

1.左右布局

方法1.使用clearfix属性

<div class="clearfix">
  <div style="float:left;">A</div>
  <div style="float:right;">B</div>
</div>

clearfix的内容:

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

方法2.使用绝对定位position

<div style="position:relative;">
  <div style="float:left;position: absolute;">A</div>
  <div style="float:right ;position: absolute;right:0px;">B</div>
</div>

绝对定位是使内容显示在界面左上角，配合right使用。

2.左中右布局

方法1.使用clearfix属性配合外边距margin

<div class="clearfix">
  <div style="float:left;">A</div>
  <div style="float:left;margin-left:50px;">B</div>
  <div style="float:right ;">C</div>
</div>

方法2.使用绝对定位position配合外边距margin

<div style="position:relative;">
  <div style="float:left;position: absolute;">A</div>
  <div style="float:right ;position: absolute;left:0px;margin-left:50px;">B</div>
  <div style="float:right ;position: absolute;right:0px;">C</div>
</div>

3.水平居中

使用text-align: center

<div style="text-align: center;">
  A
</div>

4垂直居中

使用vertical-align: top属性

<div style="vertical-align: top;">
  A
</div>