logo

float与BFC

关于 float

CSS 中 float 属性对可以方便的进行页面布局,将元素脱离文档流,类似于沉入河底的石头变成木头浮了起来,但是需要注意的是如果有文字等 inline,inline-block 元素会环绕 float 元素。

还有就是 float 属性绝对定位元素(absolute,fixed)无效。
使用 float 属性意味着块布局,将隐性的将大多其他元素类型隐性转换为block(除了对flex元素内的元素的不生效)。因此如果是 float 生效的 inline 元素就可设置宽高大小。

如果要在 JavaScript 中把 float 属性当作 element.style 对象的一个成员来操作,那么在 Firefox 34 和更老的版本中,你必须拼写成 cssFloat。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中,要使用 styleFloat 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例(这是因为在 JavaScript 中”float”是一个保留字,因为同样的原因,”class”被改成了”className” 、”for”被改成了”htmlFor”)。

关于 clear

当我们使用 float 进行布局时,时常会出现父容器高度没被撑起来的现象(高度塌陷)。在 float 属性设计之初并不是用于布局所以才会出现这种现象 orz<3。这时候就需要 clear 属性来消除这种现象。

clear 属性实际上是设置是否允许一个浮动元素 A 在当前元素 B 之前,如果允许,那么 B 就会排列在 A 之后,随之而来的就是父元素会将 B 元素包裹,整个高度也就支撑起来了。这也就是为什么通常清除浮动都是将一个隐形的带有 clear 属性的block元素放置在父容器的最后。

清除浮动的方法

  • 放置带有 clear 属性的块级元素在父容器最后。
  • 父容器添加 overflow:hidden 方法,超出父容器部分将会被隐藏,有一定局限性,因为超出父元素的情况很常见,绝对定位,margin 为负值。
  • 伪元素清除浮动,可以认为这是最佳的解决方案,兼容 IE8+,只需为需要清除浮动的元素添加 class 即可。
1
2
3
4
5
.clear-fix {
display: block;
content: '';
clear: both;
}
1
2
3
4
5
6
7
@mixin clearfix() {
&::after {
display: block;
content: '';
clear: both;
}
}

关于 BFC

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

简单来说就是当根据 CSS 渲染元素时,在一些情况下会在局部生成一个块级区域与外界元素隔离,用于消除元素之间相互布局的影响

这样我们就能理解为什么 overflow:hidden 能够清除浮动,因为其能够触发建立 BFC,与外层元素隔离消除相互影响。

下面有这样一个例子。

上面这个例子中 text 区域就建立了 BFC 区域,不受外部的影响。

建立 BFC 的情况

  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • overflow 值不为 visible 的块元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 根元素或包含根元素的元素
  • 表格单元格(元素的 display 为 table-cell,HTML 表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML 表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是 HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • display 值为 flow-root 的元素
  • contain 值为 layout、content 或 strict 的元素
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

BFC 的特性

阻止 margin collaspe

还有一点在同一个在 BFC 区域中,文档流内两个垂直相邻的块级盒子(block,table,list-item)的 margin 会发生折叠(margin collaspe),最终计算值为最大值。
浮动,绝对定位元素,inline-block 等会产生 BFC。因此,也可利用这些条件来去除 margin collaspe。
下面是一个利用display:inline-block去除外边距层叠的例子。

包含浮动元素

包含浮动元素其实就是清除浮动。

阻止被浮动兄弟元素遮挡

参考链接:

Tags: BFC