布局流程图：

遵循原则：

不到万不得已的时候不写具体的height，width；
尽量使用高级的语法，如：flex，calc，box-sizing；
如果需要兼容IE浏览器，height，width尽量写死；
对于前端工程师来说更要注意：no pic no code

计划实现：

float布局：(支持IE5)

套路： (1)子元素出现float：left或者float：right； (2)父元素必定加上clearfix；网上清除浮动的代码有很多，这里只介绍我自己经常使用的一个：

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

example：

HTML:
<div class="father clearfix">
        <div class="son" style="float: left;">儿子1</div>
        <div class="son" style="float: right;">儿子2</div>
    </div>
CSS:
 .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    .father{
        border: 1px solid red;
    }
    .son:nth-child(1){
        width: 30%;
        background-color: red; 
    }
    .son:nth-child(2){
        width: 70%;
        background-color: yellow; 
    }

导航条的实现：

HTML:
<div class="parent clearfix">
    <div class="child">logo</div>
    <div class="child">
      <div class="nav clearfix">
        <div class="navItem">导航1</div>
        <div class="navItem">导航2</div>
        <div class="navItem">导航3</div>
        <div class="navItem">导航4</div>
        <div class="navItem">导航5</div>
      </div>
  </div>

CSS:
.parent{
  margin-left: auto;
  margin-right: auto;
  background: #ddd;
}
.child{ }
.child:nth-child(1){
  width: 100px;
  background-color: #333;
  color: white;
  text-align: center;
  height: 36px;
  line-height: 36px;
  float:left;
}
.child:nth-child(2){
  float:right;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  zoom: 1;
} /*IE 6*/
.content{
  border: 1px solid black;
  margin-right: 10px;
}
.nav{
  line-height: 24px;
  padding: 6px 0;
}
.navItem{
  margin-left: 20px;
  float:left;
}

主要使用：

noraml flow
float + clear
position relative + absolute
display inline-block
负margin
1. 块级布局侧重垂直方向，行内布局侧重水平方向，flex的布局跟方向无关
2. flex布局可以实现空间自动分配，自动对齐
3. flex适用于简单的线性布局，更复杂的布局要交给grid
  /flex使用之前是要在父级元素加入display: flex;/ 主轴：main axis 侧轴：cross axis main size / cross size main start / main end ; cross start / cross end flex item 子元素 / flex container 父元素

flex container： flex-direction: row （默认，行内排列从左往右）/ row-reverse (反方向的，从右往左)/ column（从上往下排列）/ column-reverse(反方向的) flex-wrap: nowrap（默认是不换行的）/ wrap(换行) flex-flow: 是direction 和 wrap的结合： xx yy； justi-content: space-between / space-around / flex-start/flex-end/center //主轴的对齐方式空间都放在中间/空间都放在他们周围/都往起点靠/都往终点靠/全部往中间靠，没有间距 align-item: stretch flex-direction/flex-wrap/just-content/align-item

JackWong992 / article

The way to the front end（css）：Flex #3

布局流程图：

遵循原则：

float布局：(支持IE5)