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屬性
---------------------
作者：一只程序汪
來源：CSDN
原文：https://blog.csdn.net/lanseguhui/article/details/80516969
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！