子元素浮动造成父元素坍塌的原因分析和解决方法

现象：

在制作网页的导航栏的时候，往往会在父元素.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 伪类；（这个貌似是最拉风的?)