以前布局經常會用到float進行布局，但是我們都知道使用浮動布局會存在一個問題-導致父元素高度坍塌
那我們一起來探究一下解決這個問題的方法！就先從文檔流開始吧
一.定位的分類
- 普通流定位
- 浮動定位
- 相對定位
- 絕對定位
①普通流定位
| 又稱為默認文檔流定位 1.每個元素在頁面上都有自己的空間 2.每個元素都是從父元素的左上角開始渲染（顯示） 3.塊級元素按照從上到下逐個排列，每個元素單獨成行 4.行內元素是多個元素在一行中顯示，從左往右順序排列，顯示不下換行 |
②浮動定位
| 讓塊級元素橫向顯示 float： 取值：left 讓元素浮動后，在當前行停靠在父元素的左側，或者挨着左側已浮動元素 right讓元素浮動后，在當前行停靠在父元素的右側，或者挨着右側已浮動元素 none 默認值，不浮動
浮動的特點 1.元素一旦浮動，脫離文檔流(不占頁面空間，后面未浮動元素會上前補位) 2.浮動元素會在當前行，停靠在父元素的左/右邊，或者停靠在其他已浮動元素的邊緣 3.當父元素橫向顯示不下所有浮動元素時，最后顯示不下的，會自動換行 4.浮動用於解決，多個塊級元素在同一行顯示的問題 |
③浮動定位引發的特殊情況
| 1.浮動元素占位的問題 當元素顯示不下所有浮動元素時，最后顯示不下的元素會換行 但是，已浮動元素會根據自己的浮動方向占據位置， 導致被擠下去的浮動元素，需要讓開位置，在更下面的地方顯示
|
| 2.元素一旦浮動，如果元素未定義寬度，那么元素浮動之后的寬度將以內容為准
|
| 3.元素一旦浮動，都會變成塊級元素 允許設置尺寸，可以設置垂直外邊距 |
| 4.文本，行內元素，是不會被浮動元素壓在下面的。而是巧妙的避開，環繞着浮動元素顯示 以前經常利用浮動這一特點做文本環繞圖片的效果 |
來寫個小demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮動元素-小玲</title> <style> .box,.box1{ width:100%; height:200px;} .box{margin-bottom: 201px;} .box3{ width: 800px; height: 50px;} .item{float: left; } .box .item{ width:500px;height: 100%;} .box1 .item{ height: 100%;} .red{background: red;} .green{background: green;} .pink{background: pink;} .black{background:#ddd;} .block{ width:100px;height:100px;background: #ddd;float: right;} </style> </head> <body> <h3>設置寬度的塊</h3> <div class="box"> <div class="item red">abcdefghigklmn</div> <div class="item green">abcdefghi</div> <span class="item pink">abcdefghi</span> <div class="item black">abc</div> </div> <h3>未設置寬度的塊</h3> <div class="box1"> <div class="item red">abcdefghigklmn</div> <div class="item green">abcdefghi</div> <span class="item pink">abcdefghi</span> <div class="item black">abc</div> </div> <h3>文本環繞浮動元素</h3> <div class="box3"> <div class="block"></div> <span>1、偉大人物的最明顯的標志就是他堅強的意志，不管環境變換到何種地步，他的初衷與希望仍不會有絲毫的改變，並能最終克服障礙，達到期望的目的。 2、不要被他人的目光所迷惑，以己之心揣度別人的想法是很愚蠢的事情。如果你只對掌控自己的感受有把握，就試着保持每天擁有一份好心情吧！ 3、人在身處逆境時，適應環境的能力實在驚人。人可以忍受不幸，因為人有着驚人的潛力和毅力，只要立志發揮它，就一定能度過難關。 4、使你疲倦的不是前面的高山，而是你鞋里的一粒沙子。生命就是一場冒險，在每一個風雨交加的夜晚，能夠讓你堅持下去的只有執着的信念。 5、你若失去了財產---你只失去了一點，你若失去了榮譽---你就丟掉了許多，你若失去了勇氣---你就把一切都丟掉了。 </span> </div> </body> </html>
④清除浮動
| 清除之前的浮動元素給自己帶來的影響 由於元素浮動之后，會脫離文檔流，會讓后續不浮動的元素上前補位. 如果后續元素不想上前補位，需要對此元素設置清除浮動 clear: 取值：1.left 清除左浮動對我的影響 2.right 清除右浮動對我的影響 3.both 清除左右浮動對我的影響 4.none 不清除影響 |
⑤高度坍塌
| 什么叫高度坍塌 1.父元素不寫高，靠子元素撐起高度, 2.所有子元素都浮動 那么所有子元素都脫離文檔流，父元素認為自己內部沒有元素了 所以父元素就沒有高度了。 見圖
解決方案： 1.父元素也浮動，弊端：影響父元素后面的非浮動元素（后面非浮動元素占據文檔流，會補位占據前面浮動元素（脫離文檔流）的元素的位置）
2.直接給父元素寫高度 弊端，不是每次都能知道具體高是多少(例如下圖淘寶網站上一些商品的列表，你是不知道具體有多少商品的，所以對應的父元素高度也就不清楚了---這里只是舉例說明我們不知道父元素具體高度的一些情況，不代表淘寶就是用的浮動來布局的哦~)
3.overflow：hidden 弊端，會讓真正要溢出不能顯示 4.在父元素中追加一個塊級元素，這個塊級元素，沒有內容，不寫高。只寫clear:both。就可以讓父元素在文檔流中找到內容的高度 （1）直接在父元素里面增加一個塊級父元素，影響：①代碼不美觀②可能會被后期維護人員誤刪（以為是什么沒用的代碼）
（2）父元素利用偽元素:after，並且清除浮動 最后完美解決高度坍塌問題！
|
參考代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>解決浮動帶來的問題-父元素高度坍塌</title> <style> .box1,.box2,.box3,.box4,.box5{width:400px;background: greenyellow;} /* .box3{width: 500px;} */ .box1{margin-bottom: 201px;} .item{ width:180px;height:180px;} .mr{ margin-right: 30px;} .red{background: red;} .blue{background:blue;} .green{background: green;} .pink{background-color: pink;} .float-left{float:left} .item2,.item3{width:100%;height:180px;} .box3{overflow: hidden;} .clear{clear:both} .box5::after{display: block;content: '';clear: both;} </style> </head> <body> <h3>父元素高度坍塌現象</h3> <div class="box1"> <div class="item float-left mr red "></div> <div class="item float-left blue"></div> </div> <h3>父元素高度坍塌解決方案1——父元素也浮動</h3> <div class="box2 float-left"> <div class="item float-left mr red"></div> <div class="item float-left blue"></div> </div> <!---對后面非浮動元素的影響：非浮動元素具有文檔流，會補位占據前面浮動元素的位置--> <!-- <div class="item2 green">1</div> <div class="item2 pink">2</div> --> <h3>父元素高度坍塌解決方案3——overflow：hidden</h3> <div class="box3"> <div class="item float-left mr red "></div> <div class="item float-left blue"></div> <!-- <div class="item blue"></div> --> <!-- <span class="box3">sdcvsdcvsdvsdvsdfvsdvsvzsdfvasfvadav</span> --> </div> <h3>父元素高度坍塌解決方案4——增加塊級元素(1)</h3> <div class="box4 "> <div class="item float-left mr red "></div> <div class="item float-left blue"></div> <div class="clear"></div> </div> <h3>父元素高度坍塌解決方案4——增加塊級元素(2)</h3> <div class="box5"> <div class="item float-left mr red "></div> <div class="item float-left blue"></div> </div> </body> </html>