利用伪元素清除浮动

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