css清除浮动 常用的方法

• 清除浮动主要是为了解决子元素浮动导致父盒子高度为0的问题

清除浮动的方法

1.第一种

额外标签法 : 给谁清除浮动，就在其后额外添加一个空白标签 。

  <div class="home">
      <div class="first">first</div>
      <div class="second ">second </div>
      <div class="clear">额外标签法</div>
  </div>

.clear{
        clear:both;
    }

2.第二种

给父级添加overflow

可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，
使用overflow:hidden时，浏览器会自动检查浮动区域的高度

3.第三种

使用伪元素清除浮动:头部添加:after 和尾部添加:before

 <div class="home">
    <div class="first father">first</div>
    <div class="second ">second </div>
    <div class="clear">额外标签法</div>
 </div>

.father:after,
.father:before {
  content: "";
  display: block;
  clear: both;
}