码迷,mamicode.com
首页 > 其他好文 > 详细

HasLayout和BFC(Block Format Context)

时间:2016-05-06 02:01:27      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

HasLayout和BFC

1.什么是HasLayout

HasLayout是IE浏览器的一个内部的特性,这个特性有两个是true和false,false表示没有开启布局,而true表示开启了。

在IE中一个元素要么根据父元素的大小进行布局,要么根据自身的内容大小来布局,而默认情况一般是前者。但是,当我们需要根据内容来确定元素大小时,就需要开启元素的HasLayout属性,换句话说就是将元素的HasLayout设置为true。

当一个元素有一个布局时,它会对自己和后代元素进行计算从而计算自身的尺寸的计算和定位,这意味着元素要依赖于自身的内容来设置大小,而不能在依赖于祖先元素。

有的元素默认就开启了HasLayout属性,也就是他的值设置为了true,但是大部分属性确是没有的,当我们需要为一个元素开启HasLayout时,不能像其他样式一样简单开启,这里还需要采取一些特殊手段。

默认HasLayout设置为true的元素有:

  • <body> <html>
  • <table> <tr> <th> <td>
  • <img>
  • <hr>
  • <input> <button> <file> <select> <textarea> <fieldset>
  • <frameset> <frame> <iframe>

这些也只是一部分并不完全。

开启HasLayout:

  • 设置display为inline-block
  • 设置一个非auto的高度或宽度
  • 设置元素浮动设置绝对定位
  • 设置zoom属性为一个非normal的值

我们使用的最多的就是将元素的zoom属性设置为1,来开起,因为这样做的好处时不会对元素产生任何其他的影响。

2.什么是BFC

BFC(Block Formatting Context),翻译过来叫做块级格式化环境。

BFC有三个特性:

  1. 会阻止垂直外边距折叠
  2. BFC不会重叠浮动元素
  3. BFC可以包含浮动

现在我们可以主要看第3条,可以包含浮动,也就是业务着我们可以使用它来清除浮动。

如何形成BFC:

  • 设置元素漂浮
  • 设置overflow非默认值
  • 设置display为table-cell|table-caption|inline-block
  • 设置position为absolute或fixed

我们可以对父元素添加这些属性来达到清除浮动的效果。

HasLayout和BFC(Block Format Context)

标签:

原文地址:http://www.cnblogs.com/nedh/p/5463946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!