css清除浮动

什么是清除浮动

当父级元素高度不定，子级元素浮动之后致使布局破坏父级没法撑开。解决这种状况的方式叫作清除浮动

• 正常状况

*浮动之后

使用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清除浮动