CSS-float浮动布局、float清除浮动与flex布局

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）

额外标签法

    在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
    .father {
   
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
   
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
   
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
   
      height: 100px;
      background-color: brown;
    }

    .clearfix {
   
      clear: both;
    }

  <div class="father">
    <div class="left">div>
    <div class="right">div>
    
    <div class="clearfix">div>
  div>
  <div class="bottom">div>

单伪元素法

    用伪元素:：after在父级最后添加块级元素
    .father {
   
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    }

    .left {
   
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
   
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
   
      height: 100px;
      background-color: brown;
    }

    /* 单伪元素法-相当于在父级最后额外添加一个块级元素 */
  .clearfix::after {
   
    content: "";
    display: block;
    clear: both;
  }

  <div class="father clearfix">
    <div class="left">div>
    <div class="right">