(101条消息) 如何清除浮动

如何清除浮动:

  • 父元素中添加一个属性 overflow:hidden
  • 添加额外标签,并在标签中使用clear:both
  • 给浮动元素父级设置高度
  • 使用伪元素(必须是块级元素上使用)
clearfix:after {
   content: '';
   height: 0;
   display: block;
   clear: both;
   overflow: hidden;
   visibility: hidden;
}
.clearfix {
    zoom: 1;
}
  • 使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
     zoom: 1;
}

=> 推荐使用第4种方法使用伪元素,因为第1种方法子元素的内容超出会被隐藏掉,第二种增加许多不必要的标签,第3种只适合那种固定高度的布局,最后一种不够严谨。

(0)

相关推荐