浮動(dòng)影響

zhaofeihao 發(fā)布于2019-08-29 13:01 / 1197人閱讀

摘要：四包含關(guān)系的盒子，可能情況里面盒子浮動(dòng)，包住它的盒子不浮動(dòng)時(shí)，父盒子背景無(wú)顯示原因由于元素浮動(dòng)后脫離了文檔流，所以父元素是無(wú)法根據(jù)元素來(lái)自適應(yīng)的。

一、浮動(dòng)元素自動(dòng)變塊級(jí)元素

非浮動(dòng)元素占據(jù)浮動(dòng)元素位置，浮動(dòng)元素不能占據(jù)非浮動(dòng)元素位置？？？向上占據(jù)

浮動(dòng)元素會(huì)被自動(dòng)設(shè)置成塊級(jí)元素，相當(dāng)于給元素設(shè)置了display:block（塊級(jí)元素能設(shè)置寬和高，而行內(nèi)元素則不可以）。

 

浮動(dòng)元素span
 
 
 

非浮動(dòng)元素span

二、并列關(guān)系的盒子，不一致地浮動(dòng)，位置問(wèn)題

元素浮動(dòng)會(huì)對(duì)后面非浮動(dòng)的兄弟元素產(chǎn)生影響

可能情況

后邊若是非浮動(dòng)行內(nèi)元素，且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí)，行內(nèi)盒子模型壓在該浮動(dòng)元素之上

后邊若是非浮動(dòng)塊級(jí)元素，且在定位后產(chǎn)生重疊時(shí)，該塊級(jí)的內(nèi)容圍繞該浮動(dòng)元素顯示，其他在該浮動(dòng)元素底下

示例代碼如下：

 

 
    浮動(dòng)DIV
 

 
    跟在浮動(dòng)元素后邊的DIV
 

 
    跟在浮動(dòng)元素后邊的span

效果如下

不過(guò)在ie6這個(gè)效果卻很怪異，如圖：

浮動(dòng)元素沒(méi)有壓在非浮動(dòng)div之上，反而把span壓住了。

解決辦法

對(duì)被浮動(dòng)影響的元素添加clear:both

三、并列關(guān)系的盒子，一致地同方向浮動(dòng)，高度不一致問(wèn)題

多個(gè)同方向浮動(dòng)元素一般是按照流式布局，一行滿了則自動(dòng)換行，也就是類(lèi)似于以下效果：

但各個(gè)浮動(dòng)元素高度不一致的話效果很可能出現(xiàn)下邊的情況：

原因

主要排列到元素7的時(shí)候，一行已經(jīng)顯示不下了，所以要換行，但此處換行并不是從行頭開(kāi)始，而是從元素5那開(kāi)始，因?yàn)樵?比元素6高很多導(dǎo)致。

四、包含關(guān)系的盒子， 可能情況

里面盒子浮動(dòng)，包住它的盒子不浮動(dòng)時(shí)，父盒子背景無(wú)顯示

原因

由于元素浮動(dòng)后脫離了文檔流，所以父元素是無(wú)法根據(jù)元素來(lái)自適應(yīng)的。

解決辦法1 clear:both 用法

在所有浮動(dòng)元素后加:

 
TEST DIV

（1）有clear:both的：

（2）無(wú)clear:both的

原理

子元素浮動(dòng)后，因?yàn)槊撾x文檔流，所以父元素包含不住，無(wú)法撐開(kāi)。由于沒(méi)有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個(gè)空元素并且清理它。

解決辦法2 overflow 用法




    div1
    div2

原理

在父元素上設(shè)置overflow這個(gè)屬性，如果父元素的這個(gè)屬性設(shè)置為auto或者是hidden，父元素就會(huì)擴(kuò)展包含浮動(dòng)，這個(gè)方法有著比較好的語(yǔ)義性，因?yàn)樗恍枰~外的元素，但是，要記住一點(diǎn)，overflow屬性不是為了清除浮動(dòng)而定義的，要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。

解決辦法3 clearfix類(lèi) 用法