沒有 高度 overflow left 結束 方法 子元素 添加 block

在文檔流中，若父元素未設置高度，那麽父元素的高度默認是被子元素撐開的，即子元素多高，父元素就有多高。但是當子元素設置浮動之後，子元素就會完全脫離文檔流，父元素還在文檔流中，此時父元素的高度就沒有子元素撐起，從而導致父元素的高度塌陷。簡單來說，就是包含含有浮動的元素的上一級的高度變為0了，下面的元素會上去，這樣會導致頁面布局混亂。

方法1：父元素結束之前添加一個標簽 <div style="clear:both;"></div>

缺點：增加了無意義的標簽 方法2：給父元素設置overflow:hidden; zoom:1; 缺點：要是子元素要margin負值定位或是負的絕對定位，會被裁掉，所以此方法是有不小的局限性的。 方法3：讓父元素本身也浮動float：left; 缺點：雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且會導致下邊的元素上移,使得跟父元素相鄰的元素的布局受到影響。 方法4：給父元素一個固定高度，此方法適用於子元素高度已知並且固定的情況 方法5：給父元素設置display: inline-block; 缺點：會導致父元素的寬度丟失

父級塌陷清除浮動的五種方法