浮動的清除 -- 四種方法

浮動的清除 -- 四種方法

前言 -- 一個父親不能被本身浮動的兒子，撐出高度。

開胃小菜

• 來看一個實驗：如今有兩個div，div身上沒有任何屬性。每一個div中都有li，這些li都是浮動的。

咱們本覺得這些li，會分爲兩排，可是，第二組中的第1個li，去貼靠第一組中的最後一個li了。

第二個div中的li，去貼第一個div中最後一個li的邊了。
緣由就是由於div沒有高度，不能給本身浮動的孩子們，一個容器。

清除浮動方法1:給浮動的元素的祖先元素加上高度

• 若是一個元素要浮動,那麼它的祖先元素必定要有高度.高度的盒子,才能關住浮動

只要浮動在一個有高度的盒子中,那麼這個浮動就不會影響後面的浮動元素.因此就是清除浮動帶來的影響了.

清除浮動的方法2:clear:both;

• 網頁製做中,高度height不多出現.爲何?由於能被內容撐高!那麼也就是說,剛纔咱們講解的方法1,工做中用的極少.

• clear:both; clear就是清除,both指的是左浮動,右浮動都要清除.意思就是:清除別人對個人影響.
  這個方法有一個很是大的,而且致命的問題,margin失效了!

清除浮動方法3:隔牆法與內牆法

• 隔牆法 該方法經過div.cl h16這堵牆將兩個父類分隔,彌補了clear:both方法中margin無效的狀況,能夠經過設置牆的高度來控制間隙 弊端:網頁渲染後,兩個分隔的父類不會有高度

• 內牆法 顧名思義,將牆修在了父類裏面

清除浮動方法4:overflow:hidden;

• overflow:hidden;的本意是將超出父類的部分隱藏

一個父親不能被本身浮動的兒子，撐出高度。可是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是一個偏方

清除浮動的最後總結

• 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）隔牆法：
  在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。
  牆用本身的身體當作了間隙。

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，自動的根據本身的兒子，撐出高度，咱們就要想一些「小伎倆」，「奇淫技巧」。

• 內牆法：

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>

內牆法的優勢就是，不單單可以讓後部分的p不去追前部分的p了，而且能把第一個div撐出高度。這樣，這個div的背景、邊框就可以根據p的高度來撐開了。

• 4）overflow:hidden;

這個屬性的本意，就是將全部溢出盒子的內容，隱藏掉。可是，咱們發現這個東西可以用於浮動的清除。
咱們知道，一個父親，不能被本身浮動的兒子撐出高度，可是，若是這個父親加上了overflow:hidden；那麼這個父親就可以被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的小偏方。
而且,overflow:hidden;可以讓margin生效。