一、BFC是什么?
我们在页面布局的时候,经常出现一下情况:
- 这个元素高度怎么没了?
- 这两栏布局怎么没法自适应?
- 这两个元素的间距有问题
原因是元素之间相互的影响,导致了以上情况,这里就涉及到BFC了;
BFC全称是Block Formatting Context,即块级格式化上下文,是页面中的一块渲染区域,并且有一套自己的渲染规则:
- 内部的盒子会在垂直方向上一个接一个的放置;
- 对于同一个BFC的两个相邻的盒子的margin会发生重叠,与方向无关;
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也一样;
- BFC区域不会与float的元素区域重叠;
- 计算BFC的高度时,浮动子元素也参与计算;
- BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素,反之亦然;
BFC目的是形成一个相对完全独立于外界的空间,让内部的子元素不会影响到外部的元素;
二、触发条件
触发BFC的条件包括但不限于:
- 根元素,即HTML元素;
- 浮动元素:float值为left,right;
- overflow值不为visible,为auto,scroll,hidden;
- display的值为inline-block,inltable-cell,table-caption,table,inline-table,flex,inine-flex,grid,inline-grid;
- position的值为absolute或者fixed;
三、应用场景
- 防止margin重叠(塌陷):
<style> p { color:pink; margin:100px; } </style> <body> <p>haha</p> <p>hehehe</p> </body>
因为发生了margin重叠,所以两个p标签的margin值为100px,而不是200px;而且如果其中一个p标签的margin为90px,两个p标签margin值还是100px,以最大的为准;解决方法可以为:给其中的一个p标签外面添加一个div标签;再给这个div标签添加一个css样式,比如:overflow:hidden;即可解决;
<body> <div><p>haha</p></div> <p>hehehe</p> </body>
- 清除内部浮动
<style> ·par {border: 5px solid #fcc;width: 300px;} .child {border:5px solid #f66;width:100px;height: 100px;float: left; </style> <body> <div class="par"> <div class="child"></div><div class="child"></div></div> </body>
而 BFC 在计算高度时,浮动元素也会参与,所以我们可以触发.par元素生成 BFC,则内部浮动元素计算高度时候也会计算。
可以添加css样式:.par {overflow:hidden;} - 自适应多栏布局:
<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>
前面讲到,每个元素的左外边距与包含块的左边界相接触因此,虽然.aslide 为浮动元素,但是 main 的左边依然会与包含块的左边相接触而 BFC 的区域不会与浮动盒子重叠
所以我们可以通过触发 main 生成 BFC,以此适应两栏布局
.main
{
overflow:hidden;
}
这时候,新的 BFC不会与浮动的.aside 元素重叠。因此会根据包含块的宽度,和·aside 的宽度,自动变窄
效果如下: