<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div><div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div><div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div><div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>這種方法的缺點主要有二個，一個是IE 6不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。
6.解決方法四：能不能通過CSS語句添加子元素呢，這樣就不用修改HTML代碼了？
回答是可以的，我們知道CSS語句中有一個:after僞選擇符，就可以在父容器的尾部自動創建一個子元素，這正好符合我們的需要。
下面的代碼參照了lifesinger的寫法：
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}“clearfix”是父容器的class名稱，”content:”020”;”是在父容器的結尾處放一個空白字符，”height: 0;”是讓這個這個空白字符不顯示出來，”display: block; clear: both;”是確保這個空白字符是非浮動的獨立區塊。
但是，:after選擇符IE 6不支持，也就是說上面的這段代碼在IE 6中無效，這怎麼辦？
我們添加一條IE 6的獨有命令”zoom:1;”就行了，這條命令的作用是激活父元素的”hasLayout”屬性，讓父元素擁有自己的佈局。IE 6會讀取這條命令，其他瀏覽器則會直接忽略它。
7.最終代碼
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}8.附錄 什麼是hasLayout
IE使用Layout概念來控制元素的尺寸和位置。如果一個元素有Layout，它就有自身的尺寸和位置；如果沒有，它的尺寸和位置由最近的擁有佈局的祖先元素控制。
在默認情況下，擁有Layout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>（注意，<p>和<div>默認不擁有Layout。）
凡是具有以下CSS屬性的元素，也會擁有佈局：
position: absolute
float: left|right
display: inline-block
width: any value other than ‘auto’
height: any value other than ‘auto’
zoom: any value other than ‘normal’ （IE專用屬性）
writing-mode: tb-rl（IE專用屬性）
overflow: hidden|scroll|auto（只對IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只對IE 7及以上版本有效）
hasLayout是IE特有的屬性，不是CSS屬性。可以用JavaScript函數hasLayout查看一個元素是否擁有Layout。如果有，這個函數就返回true；否則返回false。hasLayout是一個只讀屬性，所以無法使用JavaScript進行設置。
