CSS 清除浮动

// HTML

 <div class="container">
        <div class="green">green</div>
        <div class="yellow">yellow</div>
 </div>

// CSS

.container {
  width: 400px;
  border: 1px solid red;
}
.green {
  width: 200px;
  height: 200px;
  background: green;
}
.yellow {
  width: 150px;
  height: 150px;
  background: yellow;
}

初始代码，父元素未设置高度，高度由子元素撑起。查看Demo

.green {
  float:left
}
.yellow {
  float:left
}

加上 float 后，若不清除浮动会发生高度塌陷。查看Demo

方案一  after 伪类清浮动

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
 .clearfix{
    zoom:1
}

几乎无缺点，推荐使用。查看Demo

 方案二  clear 清除浮动（添加空div法）

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

缺点：添加了无意义的标签，影响代码阅读。查看Demo

方案三  给浮动元素父级设置高度

.container {
  height: 400px;
}

缺点：父元素高度写死后，无法根据子元素自动调节。查看Demo

方案四  父级同时浮动（需要给父级同级元素添加浮动）

.container {
  float: left;
}

缺点：可能会影响后面不需要浮动的子元素的显示。查看Demo

方案五  给父级添加 inline-block

.container {
  display:inline-block;
}

缺点：可能会影响后面不需要浮动的子元素的显示。 查看Demo

方案六  给父级添加 overflow:hidden

.container {
  overflow: hidden;
}

缺点：可能会影响后面不需要浮动的子元素的显示。查看Demo