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>