浅谈BFC外边距穿透问题

前言：关于边距问题，有很多小白有许多误解，当然秧子也有！不过不要因为害怕不去触碰这些，这种行为是不理智的！！！

一，什么是BFC?
　BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。
　
1.在什么场景下会出现外边距合并？
在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。何为毗邻：是指没有被非空内容、padding、border 或 clear 分隔开。何为普通流：除浮动（ float ）、绝对定位（ absolute ）外的代码即为普通流

2.BFC是什么？如何形成BFC，有什么作用?
BFC的定义：是指浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
当一个HTML元素满足下面条件的任何一点，都可以产生BFC：
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边，
3. 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即 使存在浮动也是如此。 BFC的区域不会与floatbox重叠。
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5. 计算BFC的高度时，浮动元素也参与计算。
   

二，BFC的具体应用

1.在同一个BFC下会发生外边距合并

这里先说下外边距合并，外边距合并一般有3种情况

第一种，当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

第二种，当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

第三种，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

总结：
　因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的情况。

如有雷同，请勿见怪！谢谢某大神借鉴。。。。

最后

以上就是年轻电话为你收集整理的浅谈BFC外边距穿透问题的全部内容，希望文章能够帮你解决浅谈BFC外边距穿透问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。