css中解决浮动DIV撑开父层高度的问题

1） 加高法：

浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

1           <div>   →设置height

2                  <p></p>

3                  <p></p>

4                  <p></p>

5           </div>

6            

7           <div>   →设置height

8                  <p></p>

9                  <p></p>

10              <p></p>

11       </div>

2) clear:both;法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

1           <div>

2                  <p></p>

3                  <p></p>

4                  <p></p>

5           </div>

6            

7           <div>   → clear:both;

8                  <p></p>

9                  <p></p>

10              <p></p>

11       </div>

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

3）隔墙法：

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

          3.1 外墙法：

1           <div>

2                  <p></p>

3                  <p></p>

4                  <p></p>

5           </div>

6            

7           <div class="cl h10"></div>

8            

9           <div>

10              <p></p>

11              <p></p>

12              <p></p>

13       </div>

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就想出了内墙法。

         3.2 内墙法：

1           <div>

2                  <p></p>

3                  <p></p>

4                  <p></p>

5                  <div class="cl h10"></div>

6           </div>

7            

8           <div>

9                  <p></p>

10              <p></p>

11              <p></p>

12       </div>

4）overflow:hidden;

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。

我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲不仅能被浮动的儿子撑出高度了，并且overflow:hidden能让margin生效。这个现象，是浏览器渲染问题。

想要的效果：                                                                                                               未清除浮动显示出来的效果：

解决：