清楚浮動/邊界塌陷bfc

remcarpediem 發布于2019-08-30 11:25 / 1187人閱讀

摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實說清浮動已經不再合適，應該說包含浮動。總而言之清理浮動兩種方式利用屬性，清除浮動使父容器形成

CSS清浮動處理（Clear與BFC）
在CSS布局中float屬性經常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱

1 浮動帶來布局的便利，卻也帶來了新問題

復制代碼
1
2
3
4
5 Clear float
6
23
24
25

32
33
復制代碼
我們希望看到的效果是這樣的

但結果卻是這樣的

父容器并沒有把浮動的子元素包圍起來，俗稱塌陷，為了消除這種現象，我們需要一些清除浮動的技巧。

2 如何清理浮動

清理浮動一般有兩種思路

利用 clear屬性，清除浮動
使父容器形成BFC
分別看一下

2.1 利用 clear屬性，清除浮動

clear屬性是個什么東東呢？clear 屬性規定元素的哪一側不允許其它之前浮動元素，修改一下剛才代碼

復制代碼

第二個div添加了clear:both屬性后，其左側的div（第一個div）不再浮動，所以后面的div都還行(huan hang)了。我們可以利用這點兒在父容器的最后添加一個空的div，設置屬性clear:left，這樣就可以達到我們目的了。

2.1.1 添加空div清理浮動

對我們剛才代碼稍作修改

復制代碼

復制代碼
也就是在父容器最后添加

看看效果

果真好使了，有些同學看了后可能感覺奇怪，為什么想上一個例子修改第二個div

沒有變成這樣的效果

說一下自己的拙見，clear:left屬性只是消除其左側div浮動對它自己造成的影響，而不會改變左側div甚至于父容器的表現，在父容器看來，三個div還都是float的，所以高度依舊塌陷。但是我們在最后添加了一個非浮動的div，由于它有clear:left屬性，所以它會按照左側div不浮動來定位自己，也就是定位到下一行，而父容器看到有一個非浮動、普通流的子元素元素，會將其包圍，這樣造成了順便也把三個浮動元素也包裹起來的效果，高度不再塌陷（不知道說明白沒有或者這種理解對不對，還望明白的同學指點）。

當然除了添加div，還可以添加br等其它html元素，原理相同，不再贅述。

2.1.2 使用CSS插入元素

上面的做法瀏覽器兼容性不錯，但是有個很大的問題就是向頁面添加了內容來達到改變效果的目的，也就是數據和表現混淆，既然是變現，看看怎么使用CSS來解決這一問題。根本的做法還是向父容器最后追加元素，但我們可以利用CSS的:after偽元素來做此事。

添加一個類 floatfix

復制代碼
.floatfix:after{

content:"."; 
display:block; 
height:0; 
visibility:hidden; 
clear:left;

}
復制代碼
對父容器添加此類

1
2
3

這樣我們就可以看到正確效果了

簡單解釋一下，對父容器添加floatfix類后，會為其追加一個不可見的塊元素，然后設置其clear屬性為left，和剛才原理類似。

2.1.3 大師手筆

Nicolas Gallagher 在A new micro clearfix hack中提供了一種看起來更清爽的做法

.floatfix:after{

content:"";
display:table;
clear:both;

}
Nicolas Gallagher原文中還有:before是為了處理margin邊距重疊，本文中沒有列出來。

有同學會提出來了上面方法看起來不錯，但是IE6、7不支持偽元素怎們辦？這就需要我們使用BFC/haslayout的姿勢了

2.2 使父容器形成BFC

經過了前些日子園里關于BFC的狂轟濫炸相信大家都對BFC有了一定的了解，不過癮的同學可以看看 Block Format Content，BFC有三個特性

BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。

因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊了。

BFC不會重疊浮動元素
BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC

2.2.1 利用float來使父容器形成BFC

簡單修改一下代碼

1
2
3

這樣我們可以得到結果

我們可以看到父容器高度沒有塌陷，但是長度變短了，因為div應用float‘后會根據內容來改變長度，這個在很多時候很有用，但是我們不希望有這種效果怎么辦？

2.2.2 使用BFC的其它局限

上面提到使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？難道要全部使用folat嗎（確實有這種布局方式倒是）。BFC的幾種方式都有各自的問題，overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。。。

看起來還是第一種方式比較好，可是低版本IE該怎么辦呢？

2.2.3 hasLayout

我們知道在IE6、7內有個hasLayout的概念，很多bug正式由hasLayout導致的，當元素的hasLayout屬性值為false的時候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子元素的尺寸設置和定位。我們可以利用這點兒在IE6、7下完成清浮動，先看看怎么使元素hasLayout為true

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true

3 一個相對靠譜的解決方案

經過上面的比較我們可以得出一個相對靠譜的解決方案

在IE+、現代瀏覽器上使用偽元素
在IE6、7使用hasLayout
具體應該使用哪種方式來使元素hasLayout為true呢？相對而言zoom：1比較好，因為不會造成其它影響。想造成只在IE6、7上使用某些CSS的效果，我們還得需要一些CSS hack的知識，感興趣同學可以看看 CSS hack，我們可以寫出這樣的CSS

復制代碼
.floatfix{

*zoom:1;

}
.floatfix:after{

content:"";
display:table;
clear:both;

}
復制代碼
4 最后

雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，大家要掌握原理，活學活用。總而言之清理浮動兩種方式

利用 clear屬性，清除浮動
使父容器形成BFC

GPU云服務器云服務器 bfc bfc布局云邊界商業邊界

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114987.html

html高度塌陷問題解決

摘要：但是會導致寬度丟失，不推薦使用這種方式將元素的設置非值解決父元素高度塌陷副作用最小的兼容性在中沒有但是具有另一個隱含的屬性叫該屬性的作用和類似，所在瀏覽器通過開啟來解決問題。高度塌陷的問題：?? ?當開啟元素的BFC以后，元素將會有如下的特性?? ?1 父元素的垂直外邊距不會和子元素重疊?? ?開啟BFC的元素不會被浮動元素所覆蓋?? ?開啟BFC的元素可以包含浮動的子元素?? ?如何開啟元...

Big_fat_cat 2019-04-23 13:22 評論0 收藏0
為什么設置overflow為hidden可以清除浮動帶來的影響

摘要：以下情況會觸發根元素的值不為的值為，，的值為，和中的任何一個的值不為和顯然我們在設置值為時使元素具有，那么子元素浮動便不會帶來父元素的高度坍塌影響。1.問題起源　　　　在平時的業務開發寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設置父元素的ove...

JeOam 2019-04-23 13:09 評論0 收藏0
邊距重疊與BFC

摘要：邊距重疊邊界重疊是指兩個或多個盒子可能相鄰也可能嵌套的相鄰邊界其間沒有任何非空內容補白邊框重合在一起而形成一個單一邊界。兄弟元素的邊界重疊可以看到和和之間的間距不是，發生了邊距重疊是取了它們之間的最大值。邊距重疊邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成一個單一邊界。兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊...

BicycleWarrior 2019-08-29 13:57 評論0 收藏0
深入清除浮動原理

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。關于浮動設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示：...

freewolf 2019-08-29 15:25 評論0 收藏0