1.浮動原理：浮動在當前行，脫離原來文字，進入到新的一層（浮動層），然後在設定的方向（左右）移動，直到遇到父級盒子的邊緣，或者其他浮動塊的邊緣停止2.浮動換行：當一行沒有足夠空間存放所有浮動塊時，多出來的盒子會擠到下一行，然後按照設定的方向繼續移動，直到遇到父級盒子的邊緣或其他浮動塊的邊緣3.浮動坍塌：當父級盒子沒有設定具體高度，並且子級浮動的情況下，父級的高度會丟失，就是浮動的坍塌。（導致與父級盒子平級的文字會向浮動的盒子下方移動）4清除浮動 父級固定高設定：不靈活 父級設定浮動：用來判斷是否要進行清浮動的處理 父級最後一個子級位置新增block快，該快設定 clear:both; 父級選擇器::after{ content:""; display:block; clear:both; } BFC:塊級格式化上下文 overflow:hidden;（超出部分隱藏）::after 給盒子的最後一個位置，新增一個自定義的標籤 ::before 給盒子的第一個位置，新增一個自定義標籤5.浮動快特性： 1.所有的盒子都有可以浮動,並且在浮動脫離原文字流 後，將不在具有原有盒子的特性 2.支援所有的樣式設定 3.在不設定大小時，尺寸由內容撐開 4.四個方向的margin會疊加 5.水平佈局方向不在固定6.非浮動塊特性：Block：會向上佔據浮動塊所空出的區域，可以被浮動塊遮蓋inline,inline-block，文字無法出現在浮動塊所覆蓋的漁區，一般形成環繞效果7.浮動換行阻擋一般情況下出現在瀑布流佈局當中 如果上一行的浮動塊高度不一致，就會導致當前行浮動塊在浮動過程中被阻擋，margin也是浮動塊停止的邊緣。一般情況下高度不一致，往往是由盒子的內容高度不一致，問題最多就是圖片，當每個圖片的高度比不一致時，設定相同的高度，高度會有差異， 解決辦法：移動端：給圖片一個固定高度設定object-fit:cover;pc端：1.圖片差異不大 給所有的圖片給相同的固定高2.圖片高度差異很大<div class="box"> <img src="" alt=""></div>box作為可是區域，寬度大小固定。圖片在盒子中的大小設定要沾滿，甚至超出box的可視區域。Box本身設定overflow:hidden屬性