其實css浮動原理就4句話，不像網上的某些文章說的天花亂墜！
浮動必會脫離文件流請仔細理解上面這三句話，下面我們來驗證。浮動會失去塊級作用
浮動只在自己所在位置那行向左或者向右浮動
在寬度和高度沒有設定的情況下，乙個元素加上float後，會變成類似內聯元素的效果，但是它其實是塊級元素，width和height都可以設定的
實驗1結果分析：
因為div為塊標籤，而且處於同一文件流當中，固會向下排列。
實驗2結果分析：
因為div1、div2、div3都新增了浮動屬性，所以會失去塊級作用，所以他們會排列在第一行，並且是在標準文件流之上。因為浮動只能在自己所在位置那行向左或者向右浮動，又因為浮動都在標準文件流之上，所以會依次排列。
實驗3結果分析：
div1浮動，所以div1失去塊級作用，並且脫離標準文件流，因此div1在第一行。
div2不浮動，因為div1浮動了，脫離了標準文件流，所以div2會在第一行的位置，並且在div1的下面。
div3浮動，因為div2不浮動，仍然是塊級作用域，所以div3不可能跑到第一行去了，只能在第二行位置，因為浮動只能在自己所在行的位置向左或向右浮動，所以div3在第二行，並且脫離文件流。
實驗4結果分析：
div1左浮動，所以div1失去塊級作用，並且脫離標準文件流，因此div1在第一行最左邊。
div2右浮動，所以div2失去塊級作用，並且脫離標準文件流，又因為div1失去了塊級作用，所以div2在第一行最右邊。
div3左浮動，所以div3失去塊級作用，並且脫離標準文件流，因為div1、div2都浮動了，所以div3會佔到第一行的位置的下面，因為div3也具有浮動，而且左浮動，所以會在div1的右邊位置。
清除浮動包括清除左浮動、清除右浮動、清除左右浮動
clear: left 讓該標籤的左邊不能有其他標籤，如果有，則他會跑到下一行
clear: right 讓該標籤的右邊不能有其他標籤，如果有，則他會跑到下一行
clear: both 讓該標籤的左右均不能有其他標籤，如果有，則他會跑到下一行
CSS清除浮動原理
每當我們需要使用float來設定元素的時候，因為float這個屬性自身不佔據空間的原因 下層塊級元素擠壓上層塊級元素，導致畫面無法顯示出來，因此需要清除浮動，而清除浮動有兩個方法 當設定完父元素height屬性以後，只需根據子元素的高度來對父元素進行變動 father此時父元素的高度為300，無論子...
css清除浮動的原理
最近學習css發現了高度塌陷時候要清除浮動,為了理解清楚浮動原理,網上找了不少資料,發現都寫的不是很清楚,而且都是一模一樣的內容,我在裡分享一下我對清楚浮動原理的理解,如果你已經很了解什麼是浮動和浮動的效果你可以直接跳轉到三.如何清除浮動 重點 閱讀 一.什麼是浮動 首先我們需要知道定位 元素在頁面...
輕鬆玩轉Ant Design Pro一
ant design pro 於ant design，其是一段自帶樣式的react元件，用於企業後台的漂亮的，可控的元件。ant design有很多元件和樣式，不可能所有都記住，我們只要記住常用的，遇到不常用的，學會查文件就可以了 因為ant design很強大，阿里有些大神就直接將ant desi...