一般应用在商品的展示
在商品块浮动的情况下，外边的大容器不易加固定的高度height
便于后期添加商品
不加浮动如下代码
<div class="tudou clearfix"><span class="w"></span><span class="z"></span><span class="w"></span><span class="z"></span><span class="w"></span><span class="z"></span></div>
.tudou {width: 100px;border: 1px solid red;}.w,.z {float: left;width: 30px;height: 30px;background-color: pink;}
效果图
会有一个高度塌陷的现象
加上浮动后
.tudou {width: 100px;border: 1px solid red;}.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}.w,.z {float: left;width: 30px;height: 30px;background-color: pink;}
<div class="tudou clearfix"><span class="w"></span><span class="z"></span><span class="w"></span><span class="z"></span><span class="w"></span><span class="z"></span></div>
