块元素在浮动div中如何工作？ [英] How the block element works inside a floated div?

问题描述

这是以下问题的延续：

 < div class =box0> Box 0< / div> 
< div class =box1> Box1应包含文本元素。 
< p>但是，块元素呢？为什么它的行为像这样< / p> 
< / div> 
 
 .box0 {
 width：100px; 
 height：100px; 
 background-color：green; 
 float：left; 
不透明度：.5; 
} 
 .box1 {
 width：200px; 
 height：100px; 
 background-color：red; 
} 
 p {
 border：1px solid＃000; 
} 
  

解决方案

对于 p 中的文本，在那里开始一个新行，因此它只在浮动的右边缘开始，给出浮动下面的空白的外观。如果您给予 p 稍大的顶部边距，将有足够的空间让第二行文本直接在浮动下面开始：

  p {
 margin-top：1.2em; 
 border：1px solid＃000; 
} 
  

您也可以增加其他人提及的行高;这将导致第一行足够高，第二行在浮动下面有空间开始。

p 元素不完全移出浮点是因为 p 元件的行为完全类似于 .box1 ，因为它们都不是浮动的。文字以与我在我的上一个答案。

---

添加<$ c时行为不同的原因$ c> display：inline-block ， float：left 或 overflow：hidden 在我的上一个回答的评论中给出：

overflow：hidden 以生成块格式化上下文，这使得它对周围的浮动是免疫的。

（技术上来说， display：inline-block 也会使 p 元素像内联元素本身一样，换句话说， .box1 中的第一句，但是效果相同。）

.box1 或 p 正在生成块格式化上下文，它们都参与同一个上下文，实际上是根元素。这是什么原因导致他们以浮动方式与你观察的方式进行交互。

阻止格式化上下文是一个非常复杂和广泛的话题，我宁愿不进入自己，但此问题的答案有一个很好的视觉解释他们如何工作以及元素在各种情况下如何相互交互。

This is a continuation of the following question:

CSS Float - The content stays in the default stack position

When I am adding a block element(p element) inside box1, (which comes after the floated box0), the p element wraps as expected. However, it is not starting from the edge of the container. Please see the image.

Also, the behaviour is different when I add display: inline-block, or float:left, or overflow:hidden to the paragraph element. Can someone please explain these scenarios?

http://jsfiddle.net/jintoppy/xGm5E/3/

<div class="box0">Box 0</div>
<div class="box1">Box1 should wrap with text elements.
    <p>But, what about block elements? Why it is behaving like this</p>
</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
    opacity: .5;
}
.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
}
p {
    border: 1px solid #000;
}

解决方案

There isn't enough room for the text in the p to start a new line there, so it starts only at the right edge of the float, giving the appearance of a gap underneath the float. If you give the p a slightly bigger top margin, there will be enough room for the second line of text to start directly underneath the float:

p {
    margin-top: 1.2em;
    border: 1px solid #000;
}

You can also increase the line-height as mentioned by others; this will cause the first line to be tall enough for the second line to have room to start underneath the float.

The reason why the boundaries of the p element don't shift completely out of the float is because the p element behaves exactly like .box1, since neither of them are floating. The text wraps in the same way I've described in my previous answer.

---

The reason why it behaves differently when you add display: inline-block, float: left or overflow: hidden is given in the comments on my previous answer:

overflow: hidden causes the box to generate a block-formatting context, which makes it immune to surrounding floats. That causes the entire box to shift outside of the float and sit right next to it instead.

(Technically, display: inline-block also causes the p element to act like an inline element itself, in other words, it is rendered inline just like the first sentence in .box1, but this has the same effect.)

When neither .box1 nor p are generating block formatting contexts, they are both participating in the same context, which is actually that of the root element. This is what causes them to interact with the float the way you are observing.

Block formatting contexts are a very complicated and broad topic that I would rather not get into myself, but the answer to this question has a nice visual explanation on how they work and how elements interact with one another around them in various scenarios.

这篇关于块元素在浮动div中如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！