float对齐的时候会出现下一行的div挤到上一行的问题

我们要用float布局的时候往往会出现父层的DIV没有自适应子层的DIV的现象，这是因为在设置在子层设置float，对父层影响使父层的高度丢失。
问题代码如下：
<div id="nofloatbox">
<div id="floatbox"></div>
</div>
#nofloatbox {border: 1px solid #FF0000;background: #CCC;}
#floatbox {float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;}
借鉴了网下各位大神的方法，整理了如下解决方法，有什么理解不对的地方，还望各位网友指正。
方法一：在父层加overflow:hidden;
代码如下：
<div id="nofloatbox">
<div id="floatbox"></div>
</div>
#nofloatbox {border: 1px solid #FF0000;background: #CCC;overflow:hidden;}
#floatbox {float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;}
经测试，firefox,IE7~9解决问题，IE6下要触发hasLayout，加上zoom:1,完美解决。
方法二：在父层加float:left;
代码如下：
#nofloatbox {border: 1px solid #FF0000;background: #CCC;float:left;}
#floatbox {float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;}
IE6~7,firefox都解决了问题，与overflow:hidden方法不同的是，父层没有设置宽度，用float父层适应子层的宽度，而用overflow父层的宽度是默认的100%。
方法三：加div消除float
代码如下：
<div id="outcoat">
<div id="nofloatbox">
<div id="floatbox"></div>
<div style="clear:both"></div>
</div>
#nofloatbox {border: 1px solid #FF0000;background: #CCC;}
#floatbox {float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;}
方法四：公司里用的只要是子层有用float布局的都在父层加清浮动的样式
代码如下：
<div id="nofloatbox class="clearfix"">
<div id="floatbox"></div>
</div>
#nofloatbox {border: 1px solid #FF0000;background: #CCC;}
#floatbox {float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}* html .clearfix{height:1%;}.clearfix{display:block;}
四种方法本人最不喜欢第三种，推荐方法四，统一了以后有利于页面重构。