CSS浮動(dòng)其實(shí)很簡(jiǎn)單

Jiavan 發(fā)布于2019-08-30 13:58 / 2508人閱讀

摘要：實(shí)驗(yàn)最基本測(cè)驗(yàn)浮動(dòng)實(shí)驗(yàn)對(duì)應(yīng)結(jié)果實(shí)驗(yàn)結(jié)果分析因?yàn)闉閴K標(biāo)簽，而且處于同一文檔流當(dāng)中，固會(huì)向下排列。實(shí)驗(yàn)左浮動(dòng)，右浮動(dòng)，左浮動(dòng)浮動(dòng)實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)結(jié)果分析左浮動(dòng)，所以失去塊級(jí)作用，并且脫離標(biāo)準(zhǔn)文檔流，因此在第一行最左邊。

其實(shí)CSS浮動(dòng)原理就三句話，不像網(wǎng)上的某些文章說(shuō)的天花亂墜！

浮動(dòng)必會(huì)脫離文檔流
浮動(dòng)會(huì)失去塊級(jí)作用
浮動(dòng)只在自己所在位置那行向左或者向右浮動(dòng)

請(qǐng)仔細(xì)理解上面這三句話，下面我們來(lái)驗(yàn)證。

實(shí)驗(yàn)1. 最基本測(cè)驗(yàn)：




    css浮動(dòng)

實(shí)驗(yàn)1對(duì)應(yīng)結(jié)果：

實(shí)驗(yàn)1結(jié)果分析：

因?yàn)閐iv為塊標(biāo)簽，而且處于同一文檔流當(dāng)中，固會(huì)向下排列。

實(shí)驗(yàn)2 我讓div1、div2、div3全部浮動(dòng)




    css浮動(dòng)

實(shí)驗(yàn)2對(duì)應(yīng)結(jié)果：

實(shí)驗(yàn)2結(jié)果分析：

因?yàn)閐iv1、div2、div3都添加了浮動(dòng)屬性，所以會(huì)失去塊級(jí)作用，所以他們會(huì)排列在第一行，并且是在標(biāo)準(zhǔn)文檔流之上。因?yàn)楦?dòng)只能在自己所在位置那行向左或者向右浮動(dòng)，又因?yàn)楦?dòng)都在標(biāo)準(zhǔn)文檔流之上，所以會(huì)依次排列。

實(shí)驗(yàn)3 我讓div1浮動(dòng)，div2不浮動(dòng)，div3浮動(dòng)




    css浮動(dòng)

實(shí)驗(yàn)3結(jié)果：

實(shí)驗(yàn)3結(jié)果分析：

div1浮動(dòng)，所以div1失去塊級(jí)作用，并且脫離標(biāo)準(zhǔn)文檔流，因此div1在第一行。
div2不浮動(dòng)，因?yàn)閐iv1浮動(dòng)了，脫離了標(biāo)準(zhǔn)文檔流，所以div2會(huì)在第一行的位置，并且在div1的下面。
div3浮動(dòng)，因?yàn)閐iv2不浮動(dòng)，仍然是塊級(jí)作用域，所以div3不可能跑到第一行去了，只能在第二行位置，因?yàn)楦?dòng)只能在自己所在行的位置向左或向右浮動(dòng)，所以div3在第二行，并且脫離文檔流。

實(shí)驗(yàn)4 div1左浮動(dòng)，div2右浮動(dòng)，div3左浮動(dòng)




    css浮動(dòng)

實(shí)驗(yàn)4結(jié)果：

實(shí)驗(yàn)4結(jié)果分析：

div1左浮動(dòng)，所以div1失去塊級(jí)作用，并且脫離標(biāo)準(zhǔn)文檔流，因此div1在第一行最左邊。
div2右浮動(dòng)，所以div2失去塊級(jí)作用，并且脫離標(biāo)準(zhǔn)文檔流，又因?yàn)閐iv1失去了塊級(jí)作用，所以div2在第一行最右邊。
div3左浮動(dòng)，所以div3失去塊級(jí)作用，并且脫離標(biāo)準(zhǔn)文檔流，因?yàn)閐iv1、div2都浮動(dòng)了，所以div3會(huì)占到第一行的位置的下面，因?yàn)閐iv3也具有浮動(dòng)，而且左浮動(dòng)，所以會(huì)在div1的右邊位置。

清除浮動(dòng)

清除浮動(dòng)包括清除左浮動(dòng)、清除右浮動(dòng)、清除左右浮動(dòng)
clear: left 讓該標(biāo)簽的左邊不能有其他標(biāo)簽，如果有，則他會(huì)跑到下一行
clear: right 讓該標(biāo)簽的右邊不能有其他標(biāo)簽，如果有，則他會(huì)跑到下一行
clear: both 讓該標(biāo)簽的左右均不能有其他標(biāo)簽，如果有，則他會(huì)跑到下一行