为什么CSS浮点数使段落具有这种行为

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重叠。

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

Answer 1

Float属性定义如下：float CSS属性将元素放置在其容器的左侧或右侧，从而允许文本和行内元素环绕在其周围。该元素已从页面的常规流程中移除，尽管仍然保留了一部分流程。

引用此链接：https://developer.mozilla.org/en-US/docs/Web/CSS/float