概述
-
什么是BFC？
- BFC（Block Fromatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。
- w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 - BFC的特性
1,内部的Box会在垂直方向，一个接一个地放置。
2,Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生外边距合并
3,每个元素的margin box的左边， 与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4,BFC的区域不会与float box重叠。
5,BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算 - 作用：
1,创建BFC来避免垂直外边距叠加创建BFC来避免垂直外边距叠加
产生外边距合并原因：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生合并解决方法：垂直方向上的外边距合并，可以在其中的以一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便不属于同一个BFC，就不会发生margin重叠了。
2, 父元素与子元素发生外边距合并解决方法：
1，给子元素或者父元素创建BFC
（1）给父元素创建BFC：overflow、float、position、display(即如何生成BFC)
（2）给子元素创建BFC：float、position、display（即如何生成BFC （此处不能使用overflow））、给子元素外面包裹一层容器，并触发该容器生成一个BFC
2,创建BFC来清除浮动
<style>
.big {
width: 300px;
background-color:pink;
border: 1px solid blue;
}
.small {
width: 100px;
height: 100px;
background-color: purple;
border: 1px solid #ccc;
float: left;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
`
.big {
width: 300px;
background-color:pink;
border: 1px solid blue;
overflow: hidden;
}
3,创建BFC来实现自适应布局
<style>
.big {
margin-top:200px;
margin-left:200px;
width: 200px;
height: 200px;
background-color:pink;
}
.small-1 {
width: 100px;
height: 150px;
background-color: purple;
float: left;
}
.small-2 {
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="big">
<div class="small-1">
</div>
<div class="small-2">
</div>
</div>
</body>
.small-2 {
height: 200px;
background-color: deeppink;
overflow: hidden;
}
一个BFC会停止去围绕浮动元素。在有浮动元素的列类型布局中常用到。如果一个元素创建了BFC，它就不会去围绕（或者说包裹）任何浮动元素。
最后
以上就是阳光柜子为你收集整理的关于BFC外边距穿透问题的全部内容，希望文章能够帮你解决关于BFC外边距穿透问题所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复