使用float浮動之後，父元素“塌陷”的解決辦法
阿新 • • 發佈：2018-11-30
常常在並排div的時候使用到float屬性，但是使用之後會發現他們的父元素會沒有高度，之後的元素會“擠上來”，造成“塌陷”。
比如，我們想要的如下效果：
程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
< 卻發現實際執行效果是這樣的：
可以看到，father-div本應該包裹三個items，但是它的高度卻消失了。
出現這種情況的時候，我們可以通過如下幾種方法來解決：
-
在father-div里加入height屬性，該方法適用於子元素高度已知並且固定的情況。
-
在最後一個子元素後加入<div style="clear:both;"></div>，清除浮動元素。
-
在father-div里加入overflow:hidden屬性。
這裡推薦後兩種方法。