BFC、haslayout

時間 2020-08-30

標籤 bfc haslayout 简体版

原文原文鏈接

BFC（block塊，f格式化，c上下文content ）譯爲"塊級格式化上下文"javascript

它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。css

CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。html

根元素
float的值不爲none
overflow的值不爲visible
display的值爲inline-block、table-cell、table-caption
position的值爲absolute或fixed

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

3、BFC的做用及原理

　　1. 自適應兩欄佈局

　　代碼：java

 
  <style> 
 
      body { 
 
          width: 300px; 
 
          position: relative; 
 
      } 
 
      .aside { 
 
          width: 100px; 
 
          height: 150px; 
 
          float: left; 
 
          background: #f66; 
 
      } 
 
      .main { 
 
          height: 200px; 
 
          background: #fcc; 
 
      } 
 
  </style> 
 
  <body> 
 
      <div class="aside"></div> 
 
      <div class="main"></div> 
 
  </body>

haslayout(是Windows Internet Explorer渲染引擎的一個內部組成部分)css3

如何激發 haslayout？

大部分的 IE 顯示錯誤，均可以經過激發元素的 haslayout 屬性來修正。能夠經過設置 css 尺寸屬性(width/height)等來激發元素的 haslayout，使其「擁有佈局」。以下所示，經過設置如下 css 屬性便可。

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

Internet Explorer 7 還有一些額外的屬性(不徹底列表):

* min-height: (任意值)

* max-height: (除 none 外任意值)

* min-width: (任意值)

* max-width: (除 none 外任意值)

* overflow: (除 visible 外任意值)

* overflow-x: (除 visible 外任意值)

* overflow-y: (除 visible 外任意值)

* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的屬性，目前還未被瀏覽器普遍支持。

對於內聯元素(默認即爲內聯的元素，如 span，或 display:inline; 的元素)，

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發 hasLayout 。而對於IE6，若是瀏覽器運行於標準兼容模式下，內聯元素會忽略 width 或 height 屬性，因此設置 width 或 height不能在此種狀況下令該元素具備 layout。

hasLayout的觸發條件以下：

display: inline-block

height: (除 auto 外任何值)

width: (除 auto 外任何值)

float: (left 或 right)

position: absolute

zoom: (除 normal 外任意值)

writing-mode: tb-rl

附1：IE7特有的觸發Layout的屬性瀏覽器

min-height: (任意值)

min-width: (任意值)

max-height: (除 none 外任意值)

max-width: (除 none 外任意值)

overflow: (除 visible 外任意值，僅用於塊級元素)

overflow-x: (除 visible 外任意值，僅用於塊級元素)

overflow-y: (除 visible 外任意值，僅用於塊級元素)

position: fixed

附2：默認觸發Layout的HTML元素app

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

相關標籤/搜索

haslayout

bfc

深刻BFC

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。