CSS中float怎么用

這篇文章主要為大家展示了“CSS中float怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中float怎么用”這篇文章吧。

浮動(dòng)的基礎(chǔ)知識(shí)

浮動(dòng)有4個(gè)屬性：left（左浮動(dòng)）、right（右浮動(dòng)）、none（不浮動(dòng)）、inherit（繼承）。

浮動(dòng)元素的包含塊是其最近的塊級(jí)祖先元素。

浮動(dòng)元素會(huì)左偏移（或右偏移），直到它的外邊界接觸到『包含塊的內(nèi)邊界』或『另一個(gè)浮動(dòng)元素的外邊界』。

浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級(jí)元素會(huì)環(huán)繞該元素，塊級(jí)元素則不受影響。

浮動(dòng)一個(gè)非替換元素，必須為該元素聲明一個(gè)width，否則元素的寬度趨于0。

浮動(dòng)元素的margin（外邊距）不會(huì)與其他元素的margin合并。

浮動(dòng)的深入研究

浮動(dòng)元素的頂邊不可以高于包含塊中先前產(chǎn)生的塊級(jí)元素或行級(jí)元素的頂。

浮動(dòng)元素之間不可重疊，如果水平方向沒有足夠的空間放置浮動(dòng)元素，它將向下移動(dòng)，直到有足夠的空間或沒有更多的浮動(dòng)元素為止。

浮動(dòng)元素不能溢出包含塊的左、右、上邊界，僅可溢出下邊界。（浮動(dòng)元素溢出下邊界時(shí)，部分瀏覽器會(huì)增加包含塊的高度，使浮動(dòng)元素能夠包含在包含塊中，出現(xiàn)大片空白，導(dǎo)致瀏覽器兼容性問題。）

浮動(dòng)元素設(shè)置負(fù)外邊距時(shí)，雖然浮動(dòng)元素看起來溢出了包含塊，但實(shí)際并沒有違反上述規(guī)則。

特殊情況，浮動(dòng)元素比包含塊更寬時(shí)，浮動(dòng)元素會(huì)在偏移的反方向溢出。

浮動(dòng)的負(fù)作用

背景不能顯示

邊框不能撐開

margin padding 不能正確顯示

清除浮動(dòng)的方法

/* 方法1，當(dāng)父包含塊縮成一條時(shí)無效 */  
  
.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden屬性相當(dāng)于是讓父級(jí)緊貼內(nèi)容，這樣即可緊貼其對(duì)象內(nèi)內(nèi)容，從而實(shí)現(xiàn)了清除浮動(dòng)。 */  
  
.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在處理兼容性問題，hidden和auto都能清除浮動(dòng)，據(jù)說auto對(duì)seo更友好 */

以上是“CSS中float怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！