一般应用在商品的展示
在商品块浮动的情况下,外边的大容器不易加固定的高度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>