原因：1、浮動的盒子脫離了標准文檔流，會造成沒有主動設置高度的父盒子失去高度；
示例：
<div> <p>一段文字</p> </div>
當style為空，div作為p的父盒子是包住p的，所以div即使在沒有主動設置高度的情況下，它的高也是與p的高一致，即：div由p的內容撐開。
p{ float: left; }當p浮動，它就脫離了標准文檔流，從div中浮出來，即div中沒有內容可以撐開，在沒有主動設置高度的情況下，div的高度為0。
2、浮動的元素對其他元素有影響，這種影響會讓兩者相互貼靠，讓頁面布局混亂。
清除浮動方式一：
主動給父盒子添加高度，這是因為沒有高度的父盒子是關不住浮動的子盒子對其他元素的影響。
但是這種做法不常用。
清除浮動方式二：
clear：both；使用該屬性可以消除浮動帶來的影響，缺陷：這個屬性寫在被影響的父盒子里，但是父盒子的margin失效。兩個盒子會相互貼靠，無法使用margin屬性分開。
清除浮動方式三：
（1）外牆法：通過增加一個div，並且給這個div添加clear：both；屬性，可以通過給這個div添加height隔開上下兩個盒子。
缺陷：ie6及以下瀏覽器只解析最小為12px的盒子，但是可以設置font-size解決。
（2）內牆法：把牆移到父盒子里，本質上是讓父盒子有高度，就可以管住子盒子的浮動給其他元素帶來的影響。
清除浮動方式四：
overflow: hidden;優點一：本意四溢出隱藏，但是在使用過程中發現，如果給一個盒子添加此屬性，那么這個盒子就有了高度，就可以管住子盒子的浮動；
優點二：可以高度自適應，父盒子的高可以依照子盒子的內容多少，大小來自適應。