BFC与HasLayout的理解

Posted Jen Ho

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC与HasLayout的理解相关的知识,希望对你有一定的参考价值。

1、(Block Formatting Contexts)BFC 定义
  BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
2、BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
3、哪些元素会生成BFC:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
1、haslayout:
‘Layout’ 是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。。
     当一个元素的 ‘hasLayout’ 属性值为 true 时,我们说这个元素拥有了一个布局(layout),即成功触发hasLayout
     默认拥有布局的元素:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
可触发 hasLayout 的 CSS 特性:
display: inline-block         /*ALL*/
height: (除 auto 外任何值)  /*仅适用IE6 7*/
width: (除 auto 外任何值)   /*仅适用IE6 7*/
float: (left 或 right)       /*ALL*/
position: absolute           /*ALL*/
writing-mode: tb-rl          /*ALL*/
zoom: (除 normal 外任意值)  /*仅适用IE6 7*/
IE7 还有一些额外的属性(不完全列表)可以触发hasLayout :
min-height: (任意值)/*以下适用IE7+*/
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值,仅用于块级元素)
overflow-x: (除 visible 外任意值,仅用于块级元素)
overflow-y: (除 visible 外任意值,仅用于块级元素)
position: fixed
 
总结:
 1、Layout是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。
 2、BFC就是一个不让内部元素与外界相互影响包容浮动子元素并自身和外界的浮动盒子不重叠的盒子
 3、Tips:我们有时会用overflow:hidden的方法去清除浮动,就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)
 4、 IE有它自己的hasLayout属性,那么非IE浏览器呢?非IE浏览器采用的就是BFC(块格式化上下文)
  5.haslayout的原理 IE 浏览器中,触发 hasLayout 的元素在进行高度计算的时候,其浮动的子元素也会参与运算。
    
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于BFC与HasLayout的理解的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:清除浮动的原理(BFC与hasLayout)

更加直观地了解hasLayout和BFC(转)

BFC 和 haslayout

关于Block Formatting Context--BFC和IE的hasLayout

IE haslayout的理解与bug修复

CSS:haslayout