3-BFC
前面“2-两栏布局”讲到BFC,所以查了一下BFC到底是什么。
(1)BFC是什么
Box Formatting Context
Box:
CSS布局的基本单位 ,Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。
元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
让我们看看有哪些盒子:
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
run-in box: css3 中。
Formatting context :
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
BFC定义:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
BFC布局规则:
1)内部的Box会在垂直方向,一个接一个地放置。
2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3)每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4)BFC的区域不会与float box重叠。 (参见2.两栏布局的方法5,使用overflow)
5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6)计算BFC的高度时,浮动元素也参与计算
(2)那些元素会生成BFC
根元素
浮动元素,float 除 none 以外的值;
绝对定位元素,position(absolute,fixed);
display 为以下其中之一的值 inline-blocks,table-cells,table-captions, flex, inline-flex
overflow 除了 visible 以外的值(hidden,auto,scroll)
(3)BFC常见作用
A)清除内部浮动
参见BFC布局规则 6)
首先子块都是往左浮动,此时父块是撑不起来的,上下边重合。
<style type="text/css"> .parent{border: 2px solid orange;} .left-child, .right-child{float: left; width:100px; height:100px; border:2px solid #a00;} </style> </head> <body> <div class="parent"> <div class="left-child"></div> <div class="right-child"></div> </div> </body>
做法:对父块添加overflow:hidden;清除浮动 触发生成BFC
B) 自适应两栏布局
参见BFC布局规则3)和 4)
首先左子块浮动后,右边子块会忽视她,直接与父块边缘相接触
<style type="text/css"> .parent{} .left-child{width:100px;height: 100px; background: #f00; float:left;margin-right: 20px;} .right-child{background:#aaa;height:200px; } </style> </head> <body> <div class="parent"> <div class="left-child"></div> <div class="right-child"></div> </div> </body>
做法:对右边子块添加overflow:hidden;触发生成BFC,右边子块会根据父块的宽度减去左边浮动块的宽度自适应宽度。
C) 防止垂直方向margin重叠
参见BFC布局规则2)
首先, 在标准文档流中,块级标签之间竖直方向会以大的为准产生margin的坍塌现象。
<style type="text/css"> .parent{} .up-child{width:100px;height: 100px; background: #f00; margin-bottom: 30px;} .bt-child{width:100px;height: 100px; background:#aaa; margin-top: 50px;} </style> </head> <body> <div class="parent"> <div class="up-child"></div> <div class="bt-child"></div> </div> </body>
显然30px陷在了50px里面了
做法:对上面或是下面的子块再包一层div,overflow:hidden触发其生成一个BFC,这样up-child和bt-child不在同一个BFC,就不会发生margin重叠
<style type="text/css"> .parent{} .up-child{width:100px;height: 100px; background: #f00; margin-bottom: 30px;} .bt-child{width:100px;height: 100px; background:#aaa; margin-top: 50px;} .bfc{overflow: hidden;} </style> </head> <body> <div class="parent"> <div class="up-child"></div> <div class="bfc"> <div class="bt-child"></div> </div> </div> </body>
以上几个例子都体现了BFC布局规则5)
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。