清除浮动的四种方法

很多同学可能都会面临浮动影响的困扰，现在带给大家几种解决这一问题的方法：
①、在浮动元素后面加上一个空盒子，在空盒子上加clear：both；样式
②、在父元素上添加overflow：hidden/auto；触发BFC，这是css中清除浮动的机制
③、单伪元素清除浮动

.clearfix::after {
             	content: ".";/*在最后一个子元素后加上一个”.“;尽量不要加空格，否则旧版本浏览器会有间隔 */
            	display: block;/* 转换为块级元素 */
            	height: 0;/* 高度为0 */
            	visibility: hidden;     /* 隐藏盒子 */
            	clear: both;    /* 清除浮动 */
        	}
        	.clearfix {
            	*zoom: 1;
            	/* * 表示ie6.7能识别的特殊符号，带有 * 属性中有ie6.7才能执行
            	zoom就是ie6.7清除浮动的方法 */
        	}

html代码

	<div class="father clearfix">
        <div class="son"></div>
        <div class="erson"></div>
        <!-- <div></div> -->
    </div>
    <header></header>

④、双伪元素清除

		.clearfix:before,
        .clearfix:after {
            content: "";不加点
            display: table;/*	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符*/
        }
        .clearfix:after {
            clear: both;    /* 清除浮动 */
        }
        .clearfix {
            *zoom: 1;
            /* * 表示ie6.7能识别的特殊符号，带有 * 属性中有ie6.7才能执行
            zoom就是ie6.7清除浮动的方法 */
        }

如果对你有帮助的话，麻烦点个赞啊