为什么 CSS 浮点数使段落的行为方式

Question

我想完全理解为什么 CSSfloat属性的行为如片段所示：

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

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

从形式上讲，p 元素建立内联格式上下文。其内容框包含一堆行框。每个行框都缩短，以便它不会与浮动元素的边距框重叠。文本放置在行框内的内联框中。

Answer 2

Float 属性定义如下所示：

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

请参阅此链接： https://developer.mozilla.org/en-US/docs/Web/CSS/float

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>