V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
jin7
V2EX  ›  CSS

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

  •  
  •   jin7 · 56 天前 · 908 次点击
    这是一个创建于 56 天前的主题,其中的信息可能已经有所发展或是发生改变。
    BFC 布局规则: 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    大佬们 没看明白这句话什么意思.
    4 条回复    2024-09-10 12:01:32 +08:00
    78786381
        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 )中,盒子会紧挨着包含块的左侧。)
    rabbbit
        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;
    }
    chnwillliu
        3
    chnwillliu  
       56 天前 via Android   ❤️ 1
    元素的 margin 盒子贴着包含块的左边,哪怕左边有 float:left 元素飘在那里占着位置。如果 margin left 没有 float 元素的宽度大你就会看到 float 元素和这个元素的盒子重叠。
    imagecap
        4
    imagecap  
       56 天前   ❤️ 1
    需要了解下 block box ,block level box, block container box 相关的概念,以及触发 bfc 的条件。我的理解是 bfc 的所有儿子节点(不包过儿子的儿子),都必须是 block level box(块级盒子), 默认的布局规则之一:就是儿子(块级盒子)的 marginbox 的左边贴着包含块( block container ) borderbox 的左边,浮动元素也是一样的规则,默认阅读方式从左到右, 反过来贴着右边。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 04:27 · PVG 12:27 · LAX 20:27 · JFK 23:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.