1

BFC是什么?

Block?Formatting?Context?（塊格式化上下文）是W3C?CSS?2.1?規范中的一個概念，在CSS3中被修改為flow?root。格式化則表明了在這個環境中，元素處于此環境中應當被初始化，即元素在此環境中應當如何布局等。元素如果創建了BFC，那么BFC決定了如何對其內容進行定位，以及它與其他元素的關系和相互作用。創建了BFC的元素會按照如下

的方式對其子元素進行排列：

?

?元素的子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決于'margin'?特性。在BFc中相鄰的塊級元素的

垂直邊距會折疊（collapse）。

?元素的子元素中，每一個子元素左外邊與包含塊的左邊相接觸（對于從右到左的格式化，右外邊接觸右邊），即使存在浮動也是如此（盡管一個子元素的內容區域會由于浮動而壓縮），除非這個子元素也創建了一個新的BFC，如它自身也是一個浮動

2

haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout） 要想更好的理解 css， 尤其是 IE 下對 css 的渲染，haslayout 是一個非常有必要徹底弄清楚的概念。大多IE下的顯示錯誤，就是源于 haslayout。如果它設置成了true，它就不得不去渲染它自己，因此元素不得不擴展去包含它的流出的內容。例如浮動或者很長很長的沒有截斷的單詞，如果haslayout沒有被設置成true，那么元素得依靠某個祖先元素來渲染它。這就是很多的ie bugs誕生的地方 當網頁在 IE 中有異常表現時，可以嘗試激發 haslayout 來看看是不是問題所在。常用的方法是給某元素 css 設定 zoom:1。使用 zoom:1 是因為大多數情況下，它能在不影響現有環境的條件下激發元素的 haslayout。而一旦問題消失，那基本上就可以判斷是haslayout 的原因。然后就可以通過設定相應的 css 屬性來對這個問題進行修正了。建議首先要考慮的是設定元素的width/height 屬性，其次再考慮其他屬性

轉載于:https://www.cnblogs.com/wanger1994/p/4311749.html

總結

以上是生活随笔為你收集整理的bfc和haslayout的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。