有關浮動和清浮動問題，個人理解是float:left或者float:right的css樣式打破div標準流獨占一行的傳統，脫離了文檔流,所造成的浮動頁面影響類似"捆橡皮筋，當你把橡皮都拿走了，橡皮筋就回縮了",這時候，你要做的就是考慮如何有效的防止橡皮筋回縮，就是防止我們佈局的div盒子回縮,那清浮... ...
有關css外邊距margin和內邊距padding樣式,簡而述之，順時針方向旋轉,按照上右下左讀取,margin-top:/*距離上邊距*/margin-right:/*距離右邊距*/margin-bottom:/*距離底邊距*/margin-left:/*距離左邊距*/；數值排列4-1，比方說margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一樣，左右一樣*/margin:10px 20px;/*上下10px 左右20px*/margin:10px/*上下左右都是10px*/;padding道理一樣，把前面的margin更換下就好，註意下：margin:0 auto;marign為0代表上下(垂直方向Y軸),水平(X軸)居中,同時建議閱讀“盒模型大小取決於它的padding，margin，border數值”，裡面對於margin和padding有完整介紹，還有“margin的bug問題及解決辦法”補充一點的是(*盒子添加padding值，它的padding值是往外延的，在裡面的有效寬度是不會變化的，盒子模型的內邊距是減去寬高所得)
有關浮動和清浮動問題，個人理解是float:left或者float:right的css樣式打破div標準流獨占一行的傳統，脫離了文檔流,所造成的浮動頁面影響類似"捆橡皮筋，當你把橡皮都拿走了，橡皮筋就回縮了",這時候，你要做的就是考慮如何有效的防止橡皮筋回縮，就是防止我們佈局的div盒子回縮,那清浮動唄，怎麼解決？看下“float佈局打破標準流,神助攻clear清浮動”，因為課程裡面的是增加div，通過<div style='clear:both'></div>，建議用預設偽類::before與::after{content: "";display: block;clear: both;}處理...最後認為比較有意思的一點是課程中浮動的原理介紹/*float浮動只能在文檔流之前垂直位置左右浮動，其他不變*//*clear英文清除，電腦裡面是阻止的意思,clear:right不允許右邊有物體*/
clear小結:1.與float漂浮配合使用2.清除浮動,left/right/both3.可以用來做分割線4.可以解決div不漂浮，內部內部漂浮，在div最後放一個<div style="clear:both"></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>89組合margin、padding、float、clear問題</title> 7 <style type="text/css"> 8 body{ 9 cursor: pointer; 10 } 11 /*浮動只能在文檔流之前垂直位置左右浮動，其他不變*/ 12 .box1{ 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 /* float: left; */ 17 } 18 .box2{ 19 width: 110px; 20 height: 110px; 21 background-color: green; 22 float: right; 23 } 24 .box3{ 25 width: 120px; 26 height: 120px; 27 background-color: blue; 28 float: right; 29 clear: right;/*阻止清除，不允許右邊有物體*/ 30 } 31 </style> 32 <script> 33 window.onload=function(){ 34 var obj=document.getElementById('ceshi'); 35 obj.onclick=function(){ 36 console.log('我一生都在等待直到你闖進我的世界我只想對你說：餘生請多指教') 37 } 38 } 39 </script> 40 </head> 41 <body id="ceshi"> 42 <div class="box1"></div> 43 <div class="box2"></div> 44 <div class="box3"></div> 45 </body> 46 </html>
