求clearfix使用方法

题主小白，在下面的例子本想让div2在下面一行显示，但clearfix并没有清除浮动。求大神指出哪里出错，跪谢。

html：

<div class="div0">
    <div class="div1 clearfix">div1</div>
    <div class="div2">div2</div>
</div>

css:

.div0{
    width: 300px;
    height: 300px;
    background-color: seagreen;
}
.div1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: white;
}
.div2{
    float: left;
    width: 100px;
    height: 100px;
    background-color: salmon;
}
.clearfix:after,.clearfix:before{
    content: '';
    display: block;
    clear: both;
}

结果：

---

:before和:after添加到了div1的内部，相当于div1的两个子元素，自然对div1的清楚浮动没有影响

---

清除浮动是相对父级，如若子级有浮动...
你所用的方法对浮动元素本身是无用的
你只要让div1不浮动就可以了

---

在class为div0的div上增加一个clearfix的类，清楚浮动不是在本身上清除浮动

---

clearfix 是用在浮动元素的父级元素上的
.cleafix:after { content:""; display:block; height:0; clear:both;overflow:hidden;}
.clearfix ｛ zoom：1；｝
给div0 加clearfix

---

.clearfix:after后面加一个height:0;的属性，同时.clearfix{zoom:1;}

---

clearfix 是清楚div里面元素的浮动，不是清楚本身的 你要两行显示，可以在div2加 clear:both

---

div1不浮动就可以了