我们在页面布局的时候,经常会出现以下几种情况:
(1) 这个元素的高度怎么突然没了,我明明设置了…
(2) 左右两栏的布局为什么不自适应?
(3) 大盒子里面嵌套一个小盒子,为什么小盒子上移了?
(4) …
原因是元素之间的相互影响,导致了这些意象不到的情况,这是因为"BFC"
答：BFC(Block formatting contexts) 块级格式化上下文，是一种特性（文档中的一块渲染区域），拥有自己的一套渲染规则，它决定了其子元素将如何布局，以及和其他元素之间的相互关系与作用。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
如何触发BFC特性?
- display 设置为 flow-root （C3新增里面新增的，专门用来触发BFC特性的，不会产生额外副作用）
- 根元素（html）。
- 浮动元素（元素的float不是none）。
- 绝对定位元素(元素的position为absolute 或fixed)。
- 行内块元素（元素的display为inline-block)。
- 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值)
- overflow不等于visible
- 更多的触发方法参考MDN。
应用场景
- 解决margin場陷。
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>hellow</p>
<p>hellow</p>
</body>
视图如下:
2.清除内部浮动
<style>
.father {
border: 10px solid #f30d0d;
width: 500px;
}
.son {
border: 10px solid #150ef3;
width: 200px;
height: 200px;
float: left;
}
</style>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
</div>
</body>
视图如下:
当BFC在计算高度时，浮动元素也会参与，所以我们可以触发.father元素才能BFC，则内部浮动元素计算高度时候也会计算
.father {
border: 10px solid #f30d0d;
width: 500px;
//添加一个overflow
overflow: hidden;
}
3.多列布局
body {
width: 400px;
position: relative;
}
.aside {
width: 200px;
height: 150px;
float: left;
background: #f879b2;
}
.main {
height: 200px;
background: #3adee1;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
视图如下:
当我们通过触发main生成BFC，使当前元素的内部环境与外界完全隔离,以此适应两栏布局
.main {
height: 200px;
background: #3adee1;
/* 开启BFC - 当前元素的内部环境与外界完全隔离 */
overflow: hidden;
}
视图如下:
通过以上几个案例,都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素
扫一扫
3523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
