css 清除浮动方法

清除浮动

1、额外标签法（隔墙法）

<div style="clear: both"></div>

2、父级 overflow: hidden

<div style="overflow: hidden"></div>

3、父级 after 伪元素

.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

4、父级双伪元素

.clearfix::before, .clearfix::after {
	content: '';
	display: table;
}

.clearfix::after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂、书写方便	添加许多无意义的标签，结构化较差
父级 overflow: hidden	书写简单	溢出隐藏
父级 after 伪元素	结构语义化正确	IE6、7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	IE6、7不支持:after，兼容性问题