一般大家在做网页的时候会先做header头部和footer底部，在做电商网页主体的时候由于不知道商品数量的多少，所以一般不会给高度height，这样就会导致底部和主体body部分混乱。body部分的浮动元素脱标不再占有原来的位置，这样就会出现底部的标准流上移，body中的脱标元素浮在上面进而导致页面混乱。
清除浮动之前
清除浮动之后
推荐使用双伪元素清除浮动的解决方法，，最常用的解决方法分享。
双伪元素清楚浮动的本质其实就是额外标签法，即使用伪元素在父元素的前、后添加一个标签，并清除浮动clear:both 之后父元素会自动根据内容多少计算高度，避免影响下面的标准流。
使用双伪元素可以简化html的结构，非常方便和实用。
/* .clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
} */
一定要记得给不方便添加高度 的对应父元素添加class="clearfix"类选择器，不给html结构中对应的父元素添加clearfix类选择器以上代码是不起作用的哦！
版权声明：本文为lanheit原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。