css浮動(dòng)原理是什么-創(chuàng)新互聯(lián)

對(duì)img設(shè)置左浮動(dòng)，設(shè)置外邊距，效果如下圖（1）：

而當(dāng)把img的左浮動(dòng)屬性去掉后，效果如下圖（2）：

當(dāng)把

元素里面的內(nèi)容減少（也就是高度減小小于浮動(dòng)元素的高度）后：加上浮動(dòng)屬性，效果如下圖（3）：

此圖，充分說明了，元素使用了浮動(dòng)特性，會(huì)使該元素脫離文檔流，進(jìn)而會(huì)對(duì)其他元素帶來影響。

脫離了文檔流（是相對(duì)于普通文檔流來說的），該元素就不在占空間，因此在計(jì)算高度時(shí)這個(gè)元素就不考慮，上面本身div沒有設(shè)置高度，它的高度由元素里的內(nèi)容與

元素里的內(nèi)容高度共同決定（把父元素?fù)伍_）（如圖2），當(dāng)元素設(shè)置浮動(dòng)后，它就脫離文檔流，在標(biāo)準(zhǔn)流中，就只有

元素一個(gè)，

元素就自然排在上面去了，此時(shí)父元素div的高度就是由

元素里的內(nèi)容的高度決定（如，圖1,圖3）。（也就是經(jīng)常說的，父元素會(huì)塌陷問題，道理就在這）脫離文檔流只是在視覺上這個(gè)元素還是占據(jù)空間的，如圖1，圖3，圖片元素不會(huì)覆蓋其他元素內(nèi)容（這里內(nèi)容倆字很重要，也充分說明了在使用float脫離文檔流時(shí)，其他盒子會(huì)無視這個(gè)元素，但其他盒子內(nèi)的文本內(nèi)容依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周圍。），或不被其他元素內(nèi)容覆蓋。

    再在上面例子的基礎(chǔ)上，在給父元素里加上一個(gè)div塊，此時(shí)元素與

元素都設(shè)置左浮動(dòng)屬性，而新加的div 塊不設(shè)置浮動(dòng)屬性，效果如圖4：

充分說明了，設(shè)置浮動(dòng)后就會(huì)脫離文檔流，就不在占據(jù)高度，下面沒設(shè)置浮動(dòng)屬性的元素，就會(huì)按照正常的文檔流進(jìn)行布局。也能看出：設(shè)置左浮動(dòng)屬性，浮動(dòng)的框就因此向左移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框（img元素）為止。

   總結(jié)，這是自己學(xué)習(xí)float，簡(jiǎn)單理解float的原理，以及浮動(dòng)后，會(huì)造成的什么現(xiàn)象。這樣看來，浮動(dòng)就是這樣簡(jiǎn)單。

到此，相信大家對(duì)“css浮動(dòng)原理是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。