什么是清除浮动

当父级元素高度不定，子级元素浮动以后导致布局破坏父级无法撑开。解决这种情况的方式叫做清除浮动

• 正常情况

*浮动以后

使用overflow属性

  <div id="outer">
    <div id="inner"></div>
  </div>

解决方法

  #outer{
    width: 200px;
    overflow: hidden;
  }
  #inner{
    width: 100px;
    height: 100px;
    float: left;
  }

当内容超出元素框时，overflow可对内容进行处理。

使用clear属性

  <div id="outer">
    <div id="inner"></div>
    <div id="clear"></div>
  </div>

解决方法

  #outer{
    width: 200px;
  }
  #inner{
    width: 100px;
    height: 100px;
    float: left;
  }
  #clear{
    clear: both;
  }

缺点：生成了多余的html元素

伪元素加clear

  <div id="outer">
    <div id="inner"></div>
  </div>

解决方法

  #outer{
    width: 200px;
    border: 1px solid red;
  }
  #inner{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    float: left;
  }
  #outer::after{
    clear: both;
    content:'';
    display: block;
  }

使用伪元素能达到上面同样效果，但没有生成html元素为更优解。

BFC

  <div id="outer">
    <div id="inner"></div>
  </div>

解决方法

  #outer{
    width: 200px;
    border: 1px solid red;
    display: flow-root;
  }
  #inner{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    float: left;
  }

css高级用法，BFC清除浮动