清除浮动方法总结-优快云博客

第一类方法是常用的伪类清除法，这类方法也分好几种，具体看业务需求，浏览器兼容啥的，如下：

// 现代浏览器clearfix方案，不支持IE6/7 
.clearfix:after {
    display: block;//or table
    content: "";
    clear: both;
} 

// 全浏览器通用的clearfix方案 // 引入了zoom以支持IE6/7 .clearfix:after {
    display: block;//or table
    content: "";
    clear: both;
}
.clearfix {
    *zoom: 1;
} 

// 全浏览器通用的clearfix方案【推荐】 
// 引入了zoom以支持IE6/7 
// 同时加入:before以解决现代浏览器上边距折叠的问题,如果不需要考虑margin重叠的问题建议使用上面的方法
 .clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

有的是display：block的，有的是content一个点的，还有的加visibility：hidden的，各种乱七八糟的方法都有。

第二类方法:

除了给.parent设置"overflow:hidden"，我们还可以设置"display:inline-block"、"position:absolute"、"float:left"等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）：

.parent{
  overflow: hidden; 
  /* display:inline-block; */
  /* position:absolute; */
 /* float:left; */
}

以上两类方法都是给浮动元素的父元素设置的。

转载于:https://www.cnblogs.com/qdog/p/8819722.html

清除浮动两大方法