一芋簿、
1步氏、圖片中如果改變第二列的浮動為float：right滑沧，就是變成div1 div3 div2這樣排序了真仲。
這是因為第二個<div>在source order上比第三個<div>等級要高 (DOM上第二個<div>先出現(xiàn)并聲明了float right) 袋马，所以在float order 上也會比第三個<div>等級要高。又因為兩者同時像右浮動秸应，第二個<div>就會更加地靠右。
2碑宴、清除浮動软啼。
在沒清除浮動之前，頁腳是包裝在空間最長的列延柠，但是我們真正想要的頁腳留在所有列的底部祸挪，所以可以用footer { clear: both;}清楚浮動。
3贞间、整個寬度可能難以計算贿条。
到目前為止雹仿，我們的例子是沒有應(yīng)用樣式的浮動框。當(dāng)你開始給這些框加上樣式時整以，比如 borders, padding 等等胧辽，比如
div, footer {
padding: 1%;
border: 2px solid black;
background-color: red;
}問題就來了。就變成下圖：
此時公黑，您將看到您的布局已損壞 - 由于填充和邊框引入的額外寬度邑商，三列不再適合一行，因此第三列下降到另外兩列凡蚜∪硕希可以通過你的html加上下面的css。
-
{
box-sizing: border-box;
}
box-sizing 將我們box的width的計算方式變?yōu)榱薱ontent + padding + border朝蜘，而不是之前的content的width恶迈，所以當(dāng)我們增加padding或border的width時，我們不會增加我們box的width谱醇。相反我們的content的width會縮小padding或border增加的寬度暇仲。（box-sizing Internet Explorer 8不支持 ）
二、清除浮動（浮動會造成父容器高度坍塌枣抱，因此要清理浮動熔吗。如果不清除接下來的內(nèi)容就不會重新起一行）
1、上面說的clear：both（或者不要footer的話結(jié)尾處加空div標(biāo)簽 clear:both ）佳晶；
2桅狠、父級定義 overflow:hidden 。<div class="links">
<a href="#" class="forget">忘了密碼轿秧？</a>
<a href="#" class="register">注冊新賬號</a>
</div>
.links { overflow: hidden; }
.links .forget { float: left; }
.links .register { float: right; }3中跌、.clearfix。將以下 .clearfix 類應(yīng)用到需要清除浮動的父元素菇篡。
.clearfix::after {
content: '';
clear: both;
display: block;
}
參考鏈接：
1漩符、https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats
2、https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
