css浮動原理是什么

本篇內容主要講解“css浮動原理是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css浮動原理是什么”吧!

CSS的float屬性，作用就是改變塊元素(block element)對象的默認顯示方式。block對象設置了float屬性之后，它將本來占據一行的元素，可以并列排在一行里。設置浮動屬性，可以向左側或右側，浮動的框就因此向左或向右移動，直到它的外邊緣碰到包含框(浮動元素的包含塊是其最近的塊級祖先元素)或另一個浮動框的邊框為止。

  float設計的初衷，是為了在排版中，實現文字環繞效果，

下面舉一個例子：以這個文字環繞簡單分析foat原理。

   <div >

    <img src="img/3.jpg">

<p> ....</p>

</div>

對img設置左浮動，設置外邊距，效果如下圖（1）：

而當把img的左浮動屬性去掉后，效果如下圖（2）：

當把<p>元素里面的內容減少（也就是高度減小小于浮動元素的高度）后：加上浮動屬性，效果如下圖（3）：

此圖，充分說明了，元素使用了浮動特性，會使該元素脫離文檔流，進而會對其他元素帶來影響。

脫離了文檔流（是相對于普通文檔流來說的），該元素就不在占空間，因此在計算高度時這個元素就不考慮，上面本身div沒有設置高度，它的高度由<img>元素里的內容與<p>元素里的內容高度共同決定（把父元素撐開）（如圖2），當<img>元素設置浮動后，它就脫離文檔流，在標準流中，就只有<p>元素一個，<p>元素就自然排在上面去了，此時父元素div的高度就是由<p>元素里的內容的高度決定（如，圖1,圖3）。（也就是經常說的，父元素會塌陷問題，道理就在這）脫離文檔流只是在視覺上這個元素還是占據空間的，如圖1，圖3，圖片元素不會覆蓋其他元素內容（這里內容倆字很重要，也充分說明了在使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本內容依然會為這個元素讓出位置，環繞在周圍。），或不被其他元素內容覆蓋。

    再在上面例子的基礎上，在給父元素里加上一個div塊，此時<img>元素與<p>元素都設置左浮動屬性，而新加的div 塊不設置浮動屬性，效果如圖4：

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

   總結，這是自己學習float，簡單理解float的原理，以及浮動后，會造成的什么現象。這樣看來，浮動就是這樣簡單。

到此，相信大家對“css浮動原理是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！