[CSS]BFC-块级格式化上下文
时间：2023-03-30 15:37:39
CSS
BFC（blockformattingcontext）块级格式化上下文。如果一个元素有BFC，内部子元素无论如何都不会影响外部元素。因此，BFC元素不可能重叠margin，因为margin重叠会影响到外面的元素；BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动时父元素的高度会塌陷，势必会影响后面元素的布局和定位，这显然违反了BFC元素的子元素不会影响外部元素的设置。有几种情况会触发BFC：根元素；float的值不是无；overflow的值为auto、scroll或hidden；display的值在table-cell、table-caption和inline-block中任意一个；位置的值不是相对的和静态的。BFC是一个独立的布局环境，元素的布局不受外界影响，在一个BFC中，blockboxes和lineboxes（lineboxes由一行中的所有inline元素组成）会垂直沿着它的Border对齐父元素的。以上情况，不需要使用clear:both属性来清除浮动BFC和流式布局BFC的边界特性。最重要的目的不是去除边距重叠或清除浮动的影响，而是实现更健壮和更智能的自适应布局。.优点是：由于闭包，自适应内容更加健壮和容错。比如clear:both的内部设置不会干扰float元素，导致错位的自适应内容自动填充float以外的区域。你不需要关心浮动元素的宽度，它可以在整个站点中大规模应用。因此，遇到两栏布局可以使用如下方法：你好你好,你好...
....left{float:left;}.right{浮动：正确；}.bfc{溢出：隐藏；}有几个属性可以实现自适应布局：overflow:autohidden（适用于IE7及以上）display:inline-block（适用于IE6,IE7）display:table-cell（适用于IE8）利用以上属性，两组可以实现IE7及以上版本的自适应布局：1.使用overflow.lbf-content{overflow:hidden;}2。结合display:table-cell和display:inline-block.lbf-content{display:table-cell;宽度：9999px；/*如果不需要兼容IE7，下面的样式可以省略*/*display:inline-block;*width:auto;}以上两种基于BFC的自适应布局都支持无限嵌套，因此可以通过嵌套实现多列自适应布局。最后，关于display:table-cell元素中连续英文字符无法换行的问题，可以通过以下方式解决：.word-break{display:table;宽度：100%；表格布局：固定；word-break:break-all;}margins折叠常规流式布局时，盒子是垂直排列的，两者之间的间距由各自的边距决定，而不是两个边距之和。
Sibling1
Sibling2
......container{background-color:red;溢出：隐藏；/*创建块格式化上下文*/}p{background-color:lightgreen;margin:10px0;}渲染结果是：理论上两个p元素之间的margin应该是它们的margin之和(20px)，但实际上是10px，这是CollapsingMargins的结果。折叠结果按以下规则计算：1.当相邻的两个边距均为正数时，折叠结果取其间较大的值。2.当相邻的两个margin都是负数时，折叠结果取两个绝对值中较大的一个。3、当两个外边距分别为正负时，折叠结果为两者之和。产生折叠的必要条件：边距必须是连续的！使用BFC避免margincollapseBFC产生marginfolds是为了满足一个条件：相邻的两个元素必须在同一个BFC中。因此，如果两个相邻元素在不同的BFC中，则可以避免边距折叠。
