css 清楚浮动

1 父元素overflow:hidden

.father {
  border:1px solid green;
  
  overflow: hidden;
}
.son{
  border:1px solid red;
  height:100px;
  width:100px;

  float: left;
}

2 父元素强行设置高度

管你浮不浮动，老子就这么高

3 最麻烦的clear:both

在浮动的div后面再加个空div <div className="clear"></div>,用来清除浮动
clear类里面就是clear:both。但是我并不建议加没有实际意义的div。什么？清楚浮动就是他的意义？。。。？？？！

<div className="father">
      <div className="son"></div>
      <div className="clear"></div>
</div>
    
.father {
  border:1px solid green;
}
.son{
  border:1px solid red;
  height:100px;
  width:100px;

  float: left;
}
.clear{
  clear:both;
}