Question

请在必要时随时随地纠正我，因为我试图理解这一点。

9.4.1阻止格式化上下文

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”确定。属性。块格式化上下文中相邻块级框之间的垂直边距折叠。

在块格式化上下文中，每个框的左外边缘触摸包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮动也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下，盒子本身可能因浮动而变窄））。

解释规范，默认情况下，块框遵循正常的流量定位方案。

Floats，...，为其内容建立新的块格式化上下文。

我理解浮动如何在基本水平上运作。但是，关于这个规范，我不确定如何在浮动应用的情况下可视化场景。我会很感激一些视觉例子。

Answer 1

在块格式化上下文中，每个框的左外边缘都接触到包含块的左边缘（从右到左格式化，右边边缘触摸）。即使存在浮子也是如此

在浮动的情况下。块格式化上下文中的兄弟块框简单地忽略浮动，因此其左边缘与其包含块的边缘重合。

请参阅下面的示例，蓝框占据浮动图像的空间：

＆＃13;

body { text-align:center; }
section { display:inline-block; 
          width:200px; }         /* the section establishes a BFC */
img { float:left; opacity: 0.5; height:100px; width:100px; }
div { background-color:blue; height:140px;  }

＆＃13;

<section>
  <img src="http://lorempixel.com/100/100" alt="a random image">
  <div></div>
</section>

＆＃13;

（虽然盒子的行框可能会因浮动而缩小），

包含蓝色div中文本的行框可以避免浮动图像。

＆＃13;

body { text-align:center; }
section { display:inline-block; 
          width:200px; }         /* the section establishes a BFC */
img { float:left; opacity: 0.5; height:100px; width:100px; }
div { background-color:blue; height:140px;  
      color:#FFF; text-align:left; }

＆＃13;

<section>
  <img src="http://lorempixel.com/100/100" alt="a random image">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</div>
</section>

＆＃13;

除非该框建立了一个新的块格式化上下文（其中如果由于浮子，盒子本身可能会变窄。

但是，如果兄弟框建立了一个新的块格式化上下文，例如因为它已经应用了overflow:hidden，那么它也会避免浮动并使自己变窄：

＆＃13;

body { text-align:center; }
section { display:inline-block; 
          width:200px; }         /* the section establishes a BFC */
img { float:left; opacity: 0.5; height:100px; width:100px; }
div { background-color:blue; height:140px;  
      color:#FFF; text-align:left;
      overflow:hidden; }

＆＃13;

<section>
  <img src="http://lorempixel.com/100/100" alt="a random image">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</div>
</section>

＆＃13;

其中解释了问题正文中引号的文字。然而，问题标题并没有任何意义。 Float只为它们的后代建立块格式化上下文。这只是意味着BFC规则适用于那里。

浮点数如何创建新的块格式化上下文？

1 个答案: