在文檔流中，若父元素未設置高度，那么父元素的高度默認是被子元素撐開的，即子元素多高，父元素就有多高。但是當子元素設置浮動之后，子元素就會完全脫離文檔流，父元素還在文檔流中，此時父元素的高度就沒有子元素撐起，從而導致父元素的高度塌陷。簡單來說，就是包含含有浮動的元素的上一級的高度變為0了，下面的元素會上去，這樣會導致頁面布局混亂。
方法1：父元素結束之前添加一個標簽 <div style="clear:both;"></div>
缺點：增加了無意義的標簽
方法2：給父元素設置overflow:hidden; zoom:1;
缺點：要是子元素要margin負值定位或是負的絕對定位，會被裁掉，所以此方法是有不小的局限性的。
方法3：讓父元素本身也浮動float：left;
缺點：雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且會導致下邊的元素上移,使得跟父元素相鄰的元素的布局受到影響。
方法4：給父元素一個固定高度，此方法適用於子元素高度已知並且固定的情況
方法5：給父元素設置display: inline-block;
缺點：會導致父元素的寬度丟失