一、什么是BFC
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
二、如何触发 BFC上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
满足下面任一条件的元素，会触发为 BFC ：
1浮动元素，float 除 none 以外的值
2绝对定位元素，position（absolute，fixed）
3display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4overflow 除了 visible 以外的值（hidden，auto，scroll）
三、FBC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
下面来说一下BFC的实际使用场景
场景1解决子盒子都浮动时 父盒子高度不参与计算问题
<style>
.far {
border: 10px solid pink;
width: 300px;
}
.child {
border: 10px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
.far{
overflow: hidden;
}
</style>
<body>
<div class="far">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中
2box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因
<style>
p {
color: pink;
background: #fcc;
width: 200px;
height:100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p></p>
<p></p>
</body>
要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
<style>
.box {
overflow: hidden;
}
p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
<p></p>
<div class="box">
<p></p>
</div>
</body>
3实现左侧固定右侧自适应等类似布局
<style>
.out{
border: 1px solid red;
height: 200px;
}
.left{
width: 200px;
height: 150px;
background-color: green;
float: left;
}
.right{
background-color: pink;
height: 250px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="out">
<div class="left"></div>
<div class="right"></div>
</div>
|
|
收藏
淘帖
踩
奈斯
