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

[jin7]

BFC 布局规则: 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

大佬们 没看明白这句话什么意思.

[xR13zp0h67njQr2S]

虽然我知道什么是 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 ）中，盒子会紧挨着包含块的左侧。）

[rabbbit]

原文：
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;
}

[chnwillliu]

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

[imagecap]

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