CSS BFC、清晰浮动、边距折叠

terry 2年前 (2023-09-27) 阅读数 67 #数据结构与算法

BFC

块格式上下文 (BFC) 是网页视觉 CSS 渲染的一部分。这是块网格布局过程发生的区域，也是一个浮动元素。与其他元素交互的区域。

以下方法创建块格式上下文：

元素根 ()
浮动元素（元素 无 ）
正确定位的元素（位置是 绝对 或内联块元素（元素 display 表示内联块）
表格单元格（元素的显示）适用于表格单元格表标题（元素视图中的适用于表格标题）匿名表格单元格元素 ( 显示
```
.container {
  background-color: deeppink;
  border: 1px solid #000000;
}
复制代码
```
内联表 )
显示具有值的元素flow-root（兼容性不好）
flexible 元素（ flex 或元素 inline-flex 的直接子元素）

元素 ( 显示为

grid<div class="container" style="margin-top: 10px;">
  <div style="display: flex;"></div>
  <div class="child" style="margin-top: 50px;">word</div>
</div>
复制代码

元素的直接子元素 )

溢出 值不是 visible 的块元素上面的 CSS 使 BFC 列在下面类别：‷‷：‷‷元素浮动显示
- 内联块
- flex，内联Flex
- 网格，内联网格
- 表, lindang-细胞，不能选择格式上下文剪切格式浮动定位（见浮动）和清晰浮动（见清晰）都很重要。
  摘要：
  - 位置浮动和清除浮动仅适用于同一 BFC 中的元素。浮动不会影响其他BFC中元素的布局；
  - 清除浮标只能清除同一个BFC。 前面的浮动元素；
  - 边距崩溃只会发生在具有相同 BFC 的块级元素之间；
  - BFC是独立Container页面中的隔离，容器内部的子元素不会影响外部元素，反之亦然；
  - 在计算BFC的高度时，考虑了BFC中的所有元素，甚至浮动元素也包含在计算中；
  - 浮动框的面积不叠加在BFC;折叠和清除浮动的高度
    高度折叠是指父元素最初包含子元素的高度，但实际上父元素比子元素的高度必须小。
    <!DOCTYPE html> <html lang="en"> <head> <style> .container { margin-left: 50px; background: red; } .box1 { float: left; width: 200px; height: 200px; background-color: blue; } .box2 { width: 400px; height: 100px; background: cyan; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html> 复制代码
    1、box1 浮动后，父元素高度塌陷。解决办法就是让父元素触发BFC，这样BFC里的元素就不能影响到外面，给container只要加上overflow: auto;就可以了。添加完之后就是这个样子了。
    2。您还可以将 ::after 伪元素添加到 容器 并左右浮动以防止折叠。
    .container::after { content: ""; display: block; /* 不能少 */ clear: left; } 复制代码
    3。您还可以通过在父元素和 之后添加 块级元素 来删除浮动 。？只是漂浮。使用BFC去除，对应的规则是BFC中浮动框区域不重叠，添加到box2是正常的。
    5。另外，我们还可以通过clear:two;来清除浮动。我们只需要将box2添加到clear: Both;
    即可，但是效果和BFC Clear一样，只是有点不同，因为;clear:;clear如果元素向下移动并移除左右浮动。
    折叠边距
    块级元素的顶部和底部边缘有时会合并（或折叠）为一个，且尺寸最大。这种行为称为边距崩溃。折叠），有时翻译为边缘融合。请注意，浮动和定位元素的边缘不会折叠。
    外边距折叠的基本条件：
    相邻元素之间 两个相邻元素之间的外边距将折叠（除非最后一个元素必须移除前面的浮动）。
    位于父元素与第一个或最后一个子元素之间 如果没有边框、位于父元素与之间、内联内容，或创建 块格式上下文 ，或 清除浮动 以分隔两个顶部边框或将两个顶部边框与最后一个子父元素分隔开无边框、内边距、内联填充、高度、元素之间的最小高度或最大高度。如果两个底部边缘分开，则两对边缘之间将出现折叠。这时子元素的边框就会“溢出”到父元素之外。
    从上面的段落中，我们可以总结出如何去除折叠边距：
    为父元素添加边距；
    给父元素添加padding；
    父子元素之间存在内联元素 匿名元素；
    有一个元素会触发父子元素之间的BFC（插入带有display:flex的块级元素）；
    父元素触发BFC（溢出：自动；等）；
    边距折叠的一些规则：
    即使指定边距为 0，此规则仍然适用。所以即使父元素的边框为0，第一个或最后一个子元素的边框仍然会“溢出”到父元素之外。
    如果折叠边距包含负值，则折叠边距值为最大正边距和最小负边距之和（即绝对值最大的负边距）。
    如果所有参与保证金均为负值，则折叠保证金值将为最小的负保证金值。此规则适用于相邻和嵌套元素。
    以以下代码为例：
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .container { background-color: deeppink; } .child { } div { background-color: cyan; } body { margin: 0; background-color: yellow; } </style> </head> <body> <div class="container" style="margin-top: 10px;"> <div class="child" style="margin-top: 50px;">word</div> </div> </body> </html> 复制代码
    由于外边缘折叠且外边缘均为正，因此使用较大的50px
    1。将容器添加到容器，成功去除折叠。
    .container { background-color: deeppink; border: 1px solid #000000; } 复制代码
    2。在父元素上添加padding，就正常了。
    .container { background-color: deeppink; padding: 1px; } 复制代码
    3。在父子元素之间添加内联或匿名元素，添加，并去掉折叠，但新元素会占用额外空间，所以不建议这样做。
    <div class="container" style="margin-top: 10px;">   <div class="child" style="margin-top: 50px;">word</div> </div> 复制代码
    4。在父子元素之间添加触发BFC的元素，就正常了。
    <div class="container" style="margin-top: 10px;"> <div style="display: flex;"></div> <div class="child" style="margin-top: 50px;">word</div> </div> 复制代码
    5。父元素触发BFC，属于正常现象。
    .container { background-color: deeppink; overflow: auto; } 复制代码
    今天的文章就到这里，谢谢大家的阅读~
    作者：云影天空
    链接：https://juejin.im/post/5dcfe71fe51d453d824ae3c1 所有版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：CSS3实现炫酷的3D旋转透视下一篇：CSS径向渐变实现优惠券样式

CSS BFC、清晰浮动、边距折叠

BFC

折叠边距

版权声明

作者文章