1
78786381 56 天前 1
虽然我知道什么是 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 )中,盒子会紧挨着包含块的左侧。) |
2
rabbbit 56 天前 1
原文:
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; } |
3
chnwillliu 56 天前 via Android 1
元素的 margin 盒子贴着包含块的左边,哪怕左边有 float:left 元素飘在那里占着位置。如果 margin left 没有 float 元素的宽度大你就会看到 float 元素和这个元素的盒子重叠。
|
4
imagecap 56 天前 1
需要了解下 block box ,block level box, block container box 相关的概念,以及触发 bfc 的条件。我的理解是 bfc 的所有儿子节点(不包过儿子的儿子),都必须是 block level box(块级盒子), 默认的布局规则之一:就是儿子(块级盒子)的 marginbox 的左边贴着包含块( block container ) borderbox 的左边,浮动元素也是一样的规则,默认阅读方式从左到右, 反过来贴着右边。
|