float布局

步骤

1. 子元素上加上float:left和width
2. 在父元素上加.clearfix

eg:

css

/* reset,并且把盒子模型变成边框盒子模型 */
*{margin:0;padding:0;box-sizing: border-box;}  

/* 去掉列表的点 */
ul,ol{
  list-style: none;
}

/* 去掉图片底部的空隙 */
img {
  vertical-align: middle;
}

/* css布局必要步骤 */
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.logo{
  float: left;
}

html

  <header class="clearfix">
    <div class="logo">
      <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt="">
    </div>
    <ul class="clearfix">
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>

flex布局

常用属性

.container{
    /* 让一个容器变成flex容器 */
    display: flex;
    /* 改变items的流动方向 */
    flex-direction: row/row-reverse/column/column-reverse;
    /* 折行 */
    flex-wrap: nowrap/wrap/wrap-reverse;
    /* 主轴对齐方式 */
    justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly;
    /* 次轴对齐方式 */
    align-items: stretch/flex-start;
}

效果图：