为什么 CSS float 使段落表现如此

Question

我想完全理解为什么 CSS float 属性的行为如代码段所示：

p {
    margin: 0 0 1em 0;
    border: 1px solid black;
}

.container {
    width: 500px;
    border: 5px solid rgb(111, 41, 97);
    border-radius: .5em;
    padding: 10px;
}

.item {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 20px 20px 0;
    background-color: rgba(111, 41, 97, .3);
}

    <div class="container">
        <div class="item"></div>
        <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
        <p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut
            pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
    </div>

解释一下：由于div已经向左浮动，所以不在正常流中了。因此，p 元素与它重叠。但是，属于 p 的文本的行为方式不同，它会包裹 div。为什么 p 元素的文本会这样？我希望文本也与 div.

重叠

为什么 div 的 width、height 和 margin 会影响 p 的文本而不是 p 本身？

Answer 1

Float 属性定义如下：

浮动 CSS 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从页面的正常流中删除，但仍保留在流中。

参考这个link：https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 2

这几乎就是浮点数的定义。

形式上，p 元素建立了一个内联格式化上下文。它的内容框包含一堆行框。每个行框都被缩短，这样它就不会与浮动元素的边距框重叠。文本放置在行框内的行内框中。

Answer 3

您可以在此处阅读更多内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

p {
  margin: 0 0 1em 0;
  border: 1px solid black;
}

.container {
  width: 500px;
  border: 5px solid rgb(111, 41, 97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 30%;
  height: 100px;
  margin: 0 20px 20px 0;
  background-color: rgba(111, 41, 97, .3);
}

.img-text-container {
  display: flex;
  justify-content: space-between;
}

.img-text-container p {
  width: 65%;
}

<div class="container">
  <div class="img-text-container">
    <div class="item"></div>
    <p>
      Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce.
    </p>
  </div>
  <p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut
    pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

为什么 CSS float 使段落表现如此

Why CSS float makes paragraph behave that way

css

css-float