現象：

在製作網頁的導航欄的時候，往往會在父元素.nav 中加入一個logo或者標題 h1 再來加入一個導航列表 ul，這個時候會分別給他們加上 float:left / right 樣式。使用chrome的盒子模型檢視的時候會發現.nav 高度為0，也就是“坍塌”了。

用chrome的盒子模型檢視我下面的寫的程式碼時發現，.container 出現了坍塌現象，而 .nav 卻沒有。

<div class="nav">
  <div class="container"> 
    <h1>科普之家</h1>
    <ul>
      <li><a href="#news">    新聞之框  </a></li>
      <li><a href="#common">  常識科普  </a></li>
      <li><a href="#video">   精彩視訊  </a></li>
      <li><a href="#article"> 書籍文章  </a></li>
    </ul>
  </div>
</div>

.nav {
  position: fixed;  
  width: 100%;
  z-index: 1000;
  background: #ccc;
}

.container {
  margin: auto 10%;
}

.nav h1 {
  float: left;  
  line-height: 86.4px;
  font-size: 2.5em;
  font-weight: bolder;
  font-family: "方正舒體";
  color: #eee;
}

.nav ul {
  float: right;
  list-style: none;  
}

.nav li {
  float: left;
  margin: 10px auto;
}

.nav li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
 

分析：

回想學習時提到的，子元素設定浮動，便脫離了文件流（不會影響在文件流的文字）。父元素沒有設定固定的高度，子元素影響不了父元素無法為父元素撐開高度，便造成了坍塌現象。這便是為什麼 .container 沒有高度的原因；那為什麼  .container 的父元素 .nav 卻會有高度呢？我猜想是我為 .nav 設定 fixed 之後與它脫離了文件流，在同樣都脫離了文件流的情況下 h1 和 ul 會與其產生影響，便為其撐開了高度。為了驗證這個猜想我把 fixed 屬性去掉，果不其然， .nav 也出現了坍塌現象。

結論：

1、坍塌現象產生的原因：子元素設定浮動，脫離文件流，不再影響父元素，而父元素沒有設定高度，沒有其他元素為父元素“撐”開高度，便產生坍塌現象。

2、脫離文件流的元素不會影響在文件流內的元素；而脫離文件流的元素之間可能會互相影響（很明顯絕對定位元素之間不會影響，以後找機會探討一下。）

解決：

既然是浮動引起的問題，那問題就自然變成如何消除浮動。

搜尋引擎總結的幾個常見的方法：（原諒我現在並不全懂，儘量以後慢慢理解每個方法= =）

1、父元素也設定浮動或絕對定位；

2、父元素設定 overflow:hidden / auto 屬性；

3、在子元素最後增加新元素，或在父元素的下一個元素，並應用 clear:both  屬性；

    4、使用 :class 偽類；（這個貌似是最拉風的?)