css float 造成的塌陷问题 的解决

<div>
    <div style="width:300px;height:300px;float:left;‘></div>
    <div style="width:300px;height:300px;float:left;"></div>
</div>

这种情况下会出现浮动导致的塌陷问题 如何解决这种问题? 以下介绍三种方法来解决这种问题

first 在父元素最后添加一个空元素，并清除浮动，

the second way 对父元素添加属性 overflow：hidden

third way 使用伪对象：after  div:after{ clear:both;}?