佈局是什麼？根據功能劃分小塊，再根據設計稿還原，書寫靜態頁面，然後再在塊裡面填充內容，完善功能，js施加交互效果。div作為一個容器，獨占一行，代碼書寫習慣從上至下屬於標準流，而浮動float的css樣式則打破div（標準流）獨占一行的傳統！具體代碼展示如下： ...
佈局是什麼？根據功能劃分小塊，再根據設計稿還原，書寫靜態頁面，然後再在塊裡面填充內容，完善功能，js施加交互效果。div作為一個容器，獨占一行，代碼書寫習慣從上至下屬於標準流，而浮動float的css樣式則打破div（標準流）獨占一行的傳統！具體代碼展示如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>float佈局打破標準流,神助攻clear清浮動</title> 7 <style type="text/css"> 8 .box1>img{ 9 float: left;/*左浮動*/ 10 float: right;/*右浮動*/ 11 float:none;/*不浮動*/ 12 } 13 /* .box1,.box2,.box3,.box4,.box5{ 14 float: left; 15 width: 200px; 16 height: 200px; 17 margin: 10px; 18 background-color: red; 19 } */ 20 /* 如現在展示，我想要5個盒子一行展示,是不是要float,可是float後，我們發現本來包裹盒子的大容器box受到了浮動的影響，是不是要清浮動 ,我們發現給大盒子添加高度是可以撐開它的，但是這樣是不是太麻煩，如果裡面盒子的寬高變化，外面的盒子的高度是不是又要調整，那麼有沒有其他辦法了*/ 21 .box1{ 22 width: 200px; 23 height: 200px; 24 margin: 10px; 25 background-color: red; 26 } 27 .box2,.box3,.box4,.box5{ 28 float: left; 29 width: 200px; 30 height: 200px; 31 margin: 10px; 32 background-color: red; 33 } 34 .box{ 35 /* border: 1px solid red; */ 36 background-color: chartreuse; 37 /* height: 300px; */ 38 } 39 .box6{ 40 clear: both; 41 }/*新添加一個class,用 clear: both;清除浮動*//*可是外面不能為了清除浮動就單獨添加一個class在頁面上*/ 42 43 /*重點來了:使用偽元素清除浮動*/ 44 /* .box::after{ 45 content: ""; 46 display: block; 47 clear: both; 48 } */ 49 /* 根據h2裡面的文字考慮的問題只能這樣展示 */ 50 .box::before,.box::after{ 51 content: ""; 52 display: table; 53 } 54 .box::after{ 55 clear: both; 56 } 57 </style> 58 </head> 59 <body> 60 <!-- <div class="box1">/*一個大的容器盛放所有浮動元素*/ 61 <img src="https://pic.cnblogs.com/avatar/1350951/20200208114706.png" alt=""> 62 <div class="box2">學習腳本最好的方法之一就是多練習,測試是來表明bug的存在而不是不存在。</div> 63 </div> --> 64 <div class="box"> 65 <div class="box1"></div> 66 <div class="box2"></div> 67 <div class="box3"></div> 68 <div class="box4"></div> 69 <div class="box5"></div> 70 <!-- <div class="box6"></div> --> 71 </div> 72 <h2>最後一個問題來了，根據"盒模型大小取決於它的padding，margin，border數值"這篇文章介紹的margn值問題話，我們把.box裡面的border值去除下.box1不做浮動話，正常思維它和上面的box是有一個margin值10px的間隔的，但是現在沒有</h2> 73 </body> 74 </html>
