没看明白这句话什么意思--BFC 布局规则: 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

虽然我知道什么是 bfc ，但是我也看不懂这句话是什么意思，很多都是历史文档，然后机翻，代代传了下来，建议看 mdn https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
（这句话按照我的理解就是，它横向 bfc 布局，左侧相贴）
（ gpt 翻译 这意味着每个块级盒子的左侧外边距边缘（ margin-left ）将与其包含块的左边界（ border-left ）对齐。这是指在从左到右的布局（ LTR, left-to-right ）中，盒子会紧挨着包含块的左侧。）

原文：
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

就是子元素从上到下排列，子元素左侧贴着父元素，除非子元素也是 block formatting context

不理解的话看这个

<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>

.box {
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
}

p {
background: rebeccapurple;
}

元素的 margin 盒子贴着包含块的左边，哪怕左边有 float:left 元素飘在那里占着位置。如果 margin left 没有 float 元素的宽度大你就会看到 float 元素和这个元素的盒子重叠。

需要了解下 block box ，block level box, block container box 相关的概念，以及触发 bfc 的条件。我的理解是 bfc 的所有儿子节点（不包过儿子的儿子），都必须是 block level box(块级盒子)， 默认的布局规则之一：就是儿子（块级盒子）的 marginbox 的左边贴着包含块（ block container ） borderbox 的左边，浮动元素也是一样的规则，默认阅读方式从左到右， 反过来贴着右边。