css常见问题前端面试必问（持续更新）

CSS

清除浮动

1、浮动元素后面加个div，style{clear:both}
2、浮动元素加上overflow:hidden或者overflow:auto
3、利用:after伪元素，:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

浮动元素类名::after{
}

两栏登高布局

.container {
   overflow: hidden;
}
.left,
.right {
   padding-bottom: 9999px;
   margin-bottom: -9999px;
   width: 300px;
   float: left;
   background-color: rgb(124, 124, 124);
}

<div class="container">
    <div class="left">left</div>
    <div class="right">rigth</div>
</div>

三列布局

    * {
      margin: 0;
      padding: 0;
    }

    /* float+margin */
    /* .left {
      width: 100px;
      height: 300px;
      background-color: green;
      float: left;

    }

    .right {
      width: 100px;
      height: 300px;
      background-color: red;
      float: right;

    }

    .content {
      height: 300px;
      background-color: blue;
      margin-right: 100px;
      margin-left: 100px;
    } */

    /* float+overflow */
    /* .left {
      width: 100px;
      height: 300px;
      background-color: green;
      float: left;
    }

    .right {
      width: 100px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      float: right;
    }

    .content {
      height: 300px;
      background-color: blue;

    } */

    /* flex */
    .main {
      display: flex;
    }

    .left {
      width: 100px;
      height: 300px;
      background-color: green;
    }

    .right {
      width: 100px;
      height: 300px;
      background-color: red;
    }

    .content {
      height: 300px;
      background-color: blue;
      flex: 1;

    }


  <div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
  </div>