Appearance
BFC是什么
一、常见定位方案
普通流:默认,从上而下,行内元素水平排列,行满换行,块级元素渲染成一个新行。
浮动:先按普通流位置出现,然后根据浮动方向偏移。
绝对定位:元素具体位置由绝对定位坐标组成。
二、什么是BFC
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC 即 Block Formatting Contexts (块级格式化上下文),属于普通流。
可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
三、形成BFC的条件
- display: flow-root
一个新的 display 属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。
四、BFC的特性
1、内部的Box会在垂直方向上一个接一个的放置。
2、垂直方向上的距离由margin决定
3、bfc的区域不会与float的元素区域重叠。
4、计算bfc的高度时,浮动元素也参与计算
5.实例讲解
- BFC包含浮动的块
html
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
测试
- 简单bfc浮动
- 对照组
- 实验组flow-root
Try to resize this outer float
display:flow-root