530 等分布局：flex，float，table+table-cell

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>等分布局解决方法3-flex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #parent {
      /* 控制排列的方法 - 默认水平排列 */
      display: flex;
      margin-left: -10px;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      /* 平分 四个容器各占一等份  1/4 * 100%  = 25% */
      flex: 1;
      height: 300px;
      padding-left: 10px;
    }

    .col1 .inner {
      height: 300px;
      background-color: hotpink;
    }

    .col2 .inner {
      height: 300px;
      background-color: lightblue;
    }

    .col3 .inner {
      height: 300px;
      background-color: green;
    }

    .col4 .inner {
      height: 300px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1">
      <div class="inner"></div>
    </div>
    <div class="col2">
      <div class="inner"></div>
    </div>
    <div class="col3">
      <div class="inner"></div>
    </div>
    <div class="col4">
      <div class="inner"></div>
    </div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>等分布局解决方法1-float+width</title>
  <style>
    /* 浮动  100%  等分为4等分  每一等分的大小 100% / 4 = 25% 
      子元素用了浮动属性  会导致父元素的高度为0 
      原理: ** 浮动元素没有参与计算  导致父元素的高度塌陷 height: 0 **  
            ** BFC特点的元素:  作用 - 会把浮动元素的高度计算进行 **  
            ** 条件之一的属性 - overflow: hidden **  

      需要清除浮动  
      1.height:300px;
      2.overflow: hidden;   （本身作用 - 溢出隐藏）
      3.利用css提供好的一个属性 clear:both  用法： 需要浮动子元素的后面添加一个块级容器 
        <div style="clear: both;"></div>
      4. 伪元素选择器技巧 -  after  (项目中就最用的方法)
    */

    * {
      margin: 0;
      padding: 0;
    }

    /* 清除浮动利用.clearfix {}  一般封装 reset.min.css 的末尾  我们直接调用即可  */
    .clearfix::after {
      /* 三个必备的条件 */
      content: '';
      display: block;
      clear: both;

      /* 更全的属性 */
      overflow: hidden;
      visibility: hidden;
      font-size: 0;
      height: 0;
       0;
    }

    #parent {
      /* 利用margin负值技巧  进行整体移动 - 往左移动 把间距给隐藏起来啦 */
      margin-left: -10px;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      float: left;
       25%;
      /* box-sizing: border-box   把padding + border计算进去  
      实际宽度 = width (border已经计算进去了)
      */
      box-sizing: border-box;
      border-left: 10px solid #fff;
    }

    .col1 {
      background-color: hotpink;
    }

    .col2 {
      background-color: lightblue;
    }

    .col3 {
      background-color: green;
    }

    .col4 {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div id="parent" class="clearfix">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>

  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>等分布局解决方法2-table+table-cell</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 反向移动 */
    .wrap {
      margin-left: -10px;
    }

    #parent {
       100%;
      display: table;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      display: table-cell;
      padding-left: 10px;
      height: 300px;
    }

    .col1 .inner {
      height: 300px;
      background-color: hotpink;
    }

    .col2 .inner {
      height: 300px;
      background-color: lightblue;
    }

    .col3 .inner {
      height: 300px;
      background-color: green;
    }

    .col4 .inner {
      height: 300px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 作为父级容器 -->
  <div class="wrap">
    <div id="parent">
      <div class="col1">
        <div class="inner"></div>
      </div>
      <div class="col2">
        <div class="inner"></div>
      </div>
      <div class="col3">
        <div class="inner"></div>
      </div>
      <div class="col4">
        <div class="inner"></div>
      </div>
    </div>
  </div>
</body>

</html>