2017-6-6浮動的使用

時間  2019-11-19
標籤 浮動 使用 简体版
原文   原文鏈接

浮動

浮動的性質

  • 浮動的性質:脫標,貼邊,字圍,收縮.css

  • 收縮:一個浮動的元素,若是沒有設置width,那麼將自動收縮爲文字的寬度(這點很是像行內元素);
    enter description herehtml

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮動收縮</title> 
  6. <style type="text/css"> 
  7. .box{ 
  8. background-color: yellow; 
  9. float: left; 
  10. height: 100px; 
  11. } 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <div class="box"> 
  16. 武松打虎打虎打虎打虎打虎 
  17. </div> 
  18. </body> 
  19. </html> 

這個div浮動了,且沒有設置寬度,那麼將自動縮緊爲內容的寬度
整個網頁就是經過浮動來實現並排的;前端

浮動的清除

  • 實驗1:兩個DIV不給任何屬性,每一個div中都有li,這些li都是浮動的web

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮動的清除</title> 
  6. <style type="text/css"> 
  7. div ul li{ 
  8.  
  9. width: 90px; 
  10. height: 45px; 
  11. float: left; 
  12. text-align: center; 
  13. background-color: yellow; 
  14. } 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <div> 
  19. <ul> 
  20. <li>HTML</li> 
  21. <li>CSS</li> 
  22. <li>JS</li> 
  23. <li>HTML5</li> 
  24. <li>設置模式</li> 
  25. </ul> 
  26. </div> 
  27. <div> 
  28. <ul> 
  29. <li>學習方法</li> 
  30. <li>英語水平</li> 
  31. <li>面試技巧</li> 
  32. </ul> 
  33. </div> 
  34. </body> 
  35. </html> 

enter description here

1496736435384.jpg

  • 現象:咱們本覺得第二個div中的li會另起一行,結果它卻緊隨第一個div中的最後一個li的邊了;面試

  • 緣由就是由於div沒有高度,不能給本身浮動的孩子們,一個容器.瀏覽器

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

若是一個元素要浮動,那麼它的祖先元素必定要有高度.有高度的盒子才能關住浮動
enter description here
只要浮動在一個有高度的盒子中,那麼這個浮動就不會影響後面的浮動元素,因此就是清除浮動帶來的影響了
enter description here學習

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

  • 網頁製做中,高度height不多出現.爲何?由於他能夠被內容給撐高!那也就是說方法1在工做中不多用到.spa

  • 思考:能不能不寫height,也把浮動清除了呢?也讓浮動之間互不影響呢?]3d

  • clear:both;屬性就能夠清楚浮動code

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮動的清除</title> 
  6. <style type="text/css"> 
  7. /*div {*/ 
  8. /*height: 45px;*/ 
  9. /*}*/ 
  10. div ul li{ 
  11.  
  12. width: 90px; 
  13. height: 45px; 
  14. float: left; 
  15. text-align: center; 
  16. background-color: yellow; 
  17. } 
  18. .box2{ 
  19. clear: both; 
  20. margin-top: 10px; 
  21. } 
  22.  
  23. </style> 
  24. </head> 
  25. <body> 
  26. <div class="box1"> 
  27. <ul> 
  28. <li>HTML</li> 
  29. <li>CSS</li> 
  30. <li>JS</li> 
  31. <li>HTML5</li> 
  32. <li>設置模式</li> 
  33. </ul> 
  34. </div> 
  35. <div class="box2"> 
  36. <ul> 
  37. <li>學習方法</li> 
  38. <li>英語水平</li> 
  39. <li>面試技巧</li> 
  40. </ul> 
  41. </div> 
  42. </body> 
  43. </html> 

enter description here

1496745245005.jpg

可是使用這個屬性有一個很嚴重的問題:就是全部的margin屬性都會失效

  • 清楚浮動的方法3:隔牆法
    enter description here

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮動的清除</title> 
  6. <style type="text/css"> 
  7. /*div {*/ 
  8. /*height: 45px;*/ 
  9. /*}*/ 
  10. div ul li{ 
  11.  
  12. width: 90px; 
  13. height: 45px; 
  14. float: left; 
  15. text-align: center; 
  16. background-color: yellow; 
  17. } 
  18. .bg{ 
  19. clear: both; 
  20.  
  21. } 
  22.  
  23. </style> 
  24. </head> 
  25. <body> 
  26. <div class="box1"> 
  27. <ul> 
  28. <li>HTML</li> 
  29. <li>CSS</li> 
  30. <li>JS</li> 
  31. <li>HTML5</li> 
  32. <li>設置模式</li> 
  33. </ul> 
  34. </div> 
  35. <div class="bg"></div> 
  36. <div class="box2"> 
  37. <ul> 
  38. <li>學習方法</li> 
  39. <li>英語水平</li> 
  40. <li>面試技巧</li> 
  41. </ul> 
  42. </div> 
  43. </body> 
  44. </html> 

內牆法

enter description here

1496747003048.jpg

  • 內牆法的本質給沒高的父親撐出高度
    enter description here

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>內牆法</title> 
  6. <style type="text/css"> 
  7. * { 
  8. margin: 0 auto; 
  9. padding: 0; 
  10. } 
  11. div{ 
  12. background-color: blue; 
  13. } 
  14. p{ 
  15. width: 100px; 
  16. height: 100px; 
  17. background-color: green; 
  18. float: left; 
  19. } 
  20. .cl{ 
  21. clear: both; 
  22. } 
  23. </style> 
  24. </head> 
  25. <body> 
  26. <div> 
  27. <p></p> 
  28. <div class="cl"></div> 
  29. </div> 
  30. </body> 
  31. </html> 

清除浮動的方法4 overflow:hidden

  • overflow就是"溢出"的意思,hidden就是"隱藏"的意思.

  • overflow:hidden;表示"溢出隱藏".全部溢出邊框的內容,都要隱藏掉

enter description here

1496755641965.jpg

  • 本意就是清除溢出到盒子外面的文字.可是,前端開發工程師又發現了他能作偏方
    一個父親不能被本身浮動的兒子,撐出高度.可是,只要給父親加上overflow:hidden;那麼父親就能被兒子撐出高了,
    enter description here

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>overflow偏方</title> 
  6. <style type="text/css"> 
  7. *{ 
  8. margin: 0; 
  9. padding: 0; 
  10. } 
  11. .box{ 
  12. width: 600px; 
  13. border: 10px solid red; 
  14. overflow: hidden; 
  15. } 
  16. .p1{ 
  17. height: 160px; 
  18. width: 100px; 
  19. background-color: green; 
  20. float: left; 
  21. } 
  22. .p2{ 
  23. height: 200px; 
  24. width: 100px; 
  25. background-color: peru; 
  26. float: left; 
  27. } 
  28. .p3{ 
  29. height: 300px; 
  30. width: 100px; 
  31. background-color: yellow; 
  32. float: left; 
  33. } 
  34. </style> 
  35. </head> 
  36. <body> 
  37. <div class="box"> 
  38. <p class="p1"></p> 
  39. <p class="p2"></p> 
  40. <p class="p3"></p> 
  41. </div> 
  42. </body> 
  43. </html> 

浮動的案例與總結

總結一下：

  • 1） 加高法：
    浮動的元素，只能被有高度的盒子關住。 也就是說，若是盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。可是，工做上，咱們絕對不會給全部的盒子加高度，這是由於麻煩，而且不能適應頁面的快速變化。

  1. 1<div> → 設置height 
  2. 2 <p></p> 
  3. 3 <p></p> 
  4. 4 <p></p> 
  5. 5</div> 
  6. 6 
  7. 7<div> → 設置height 
  8. 8 <p></p> 
  9. 9 <p></p> 
  10. 10 <p></p> 
  11. 11</div> 

    1. clear:both;法
      最簡單的清除浮動的方法，就是給盒子增長clear:both；表示本身的內部元素，不受其餘盒子的影響。

  1. 1<div> 
  2. 2 <p></p> 
  3. 3 <p></p> 
  4. 4 <p></p> 
  5. 5</div> 
  6. 6 
  7. 7<div> → clear:both; 
  8. 8 <p></p> 
  9. 9 <p></p> 
  10. 10 <p></p> 
  11. </div> 

浮動確實被清除了，不會互相影響了。可是有一個問題，就是margin失效。兩個div之間，沒有任何的間隙了。

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

  1. 1<div> 
  2. 2 <p></p> 
  3. 3 <p></p> 
  4. 4 <p></p> 
  5. 5</div> 
  6. 6 
  7. 7<div class="cl h10"></div> 
  8. 8 
  9. 9<div> 
  10. 10 <p></p> 
  11. 11 <p></p> 
  12. 12 <p></p> 
  13. </div> 

咱們發現，隔牆法好用，可是第一個div，仍是沒有高度。若是咱們如今想讓第一個div，自動的根據本身的兒子，撐出高度，咱們就要想一些「小伎倆」，「奇淫技巧」。

  • 內牆法：

  1. 1<div> 
  2. 2 <p></p> 
  3. 3 <p></p> 
  4. 4 <p></p> 
  5. 5 <div class="cl h10"></div> 
  6. 6</div> 
  7. 7 
  8. 8<div> 
  9. 9 <p></p> 
  10. 10 <p></p> 
  11. 11 <p></p> 
  12. </div> 

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

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

  • 清除浮動的案例：
    enter description here
    enter description here

  1. <style type="text/css"> 
  2. *{ 
  3. margin: 0; 
  4. padding: 0; 
  5. } 
  6. .news{ 
  7. width: 400px; 
  8. height: 100px; 
  9. border: 1px solid #000; 
  10. margin: 100px; 
  11. overflow: hidden; 
  12. } 
  13. .news ul{ 
  14. list-style: none; 
  15. } 
  16. .news ul li{ 
  17. overflow: hidden; 
  18. _zoom:1; 
  19. border-bottom: 1px dashed gray; 
  20. } 
  21. .news ul li span.title{ 
  22. float: left; 
  23. } 
  24. .news ul li span.date{ 
  25. float: right; 
  26. } 
  27. </style> 

瀏覽器兼容問題

上述知識點碰見的瀏覽器兼容問題
第一，IE6，不支持小於12px的盒子，任何小於12px的盒子，在IE6中看都大
解決辦法很簡單，就是將盒子的字號，設置小（小於盒子的高），好比0px。

  1. height: 4px; 
  2. _font-size: 0px; 

咱們如今介紹一下瀏覽器hack。hack就是「黑客」，就是使用瀏覽器提供的後門，針對某一種瀏覽器作兼容。
IE6留了一個後門，就是隻要給css屬性以前，加上下劃線，這個屬性就是IE6認識的專有屬性。
好比：

  1. _background-color: green; 

enter description here

1496803214456.jpg

解決微型盒子，正確寫法：

  1. height: 10px; 
  2. _font-size:0; 

第二，IE6不支持用overflow:hidden;來清除浮動的
解決辦法，以毒攻毒。追加一條

  1. _zoom:1; 

完整寫法：

  1. overflow: hidden; 
  2. _zoom:1; 

實際上，_zoom:1;可以觸發瀏覽器hasLayout機制。這個機制，不要深究了，由於就IE6有。咱們只須要讓IE6好用，具體的實現機制，有興趣的同窗，自行百度。

強調一點， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏，這個功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動的時候。

咱們剛纔學習了兩個IE6的兼容問題，這兩個IE6的兼容問題，都是經過多寫一條hack來解決的。
這個咱們稱爲伴生屬性。

  1. height:6px; 
  2. _font-size:0; 
  3. overflow:hidden; 
  4. _zoom:1; 

margin現象

標準文檔流中，豎直方向的margin不疊加，以較大的爲準。
enter description here
enter description here
若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的：
enter description here

盒子居中margin:0 auto;

margin的值能夠爲auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了：

  1. margin-left: auto; 
  2. margin-right: auto; 

簡寫爲

  1. margin:0 auto; 

p 注意：
1） 使用margin:0 auto; 的盒子，必須有width，有明確的width
2） 只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用

  1. text-align:center; 
  1. margin:0 auto; → 讓這個div本身在大容器中居中。 
  2. text-align: center; → 讓這個div內部的文本居中。 

普及一下知識，text-align還有

  1. text-align:left; 沒啥用，由於默認居左 
  2. text-align:right; 文本居右 

善於使用父親的padding,而不是兒子的margin

若是父親沒有border，那麼兒子的margin實際上踹的是「流」，踹的是這「行」。因此，父親總體也掉下來了
這個p有一個margin-top踹父親，試圖將本身下移

  1. 1 <div> 
  2. 2 <p></p> 
  3. 3 </div> 

enter description here

1496806507090.jpg

enter description here
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
因此，咱們必定要善於使用父親的padding，而不是兒子的margin。

關於margin的IE6兼容問題

  • IE6雙倍margin bug
    當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。

  1. <ul> 
  2. <li></li> 
  3. <li></li> 
  4. <li></li> 
  5. </ul> 

enter description here

1496817691961.jpg

  • 解決方案：

  • 1）使浮動的方向和margin的方向，相反。
    因此，你就會發現，咱們特別喜歡，浮動的方向和margin的方向相反。而且，前端開發工程師，把這個當作習慣了。

  1. float: left; 
  2. margin-right: 40px; 

*　2）使用hack（不必，別慣着這個IE6）

  • 單獨給隊首的元素，寫一個一半的margin

  1. <li class="no1"></li> 
  2. ul li.no1{ 
  3. _margin-left:20px; 
  4. } 

  • IE6的3px bug
    enter description here

解決辦法： 不用管，由於根本就不容許用兒子踹父親。因此，若是你出現了3px bug，說明你的代碼不標準。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程