基本 CSS 浮动元素行为

Question

我很难理解一些非常基本的 css 浮动规则。

假设我有一个这样的 HTML 结构：

* {
    padding: 0;
    margin: 0;
}
div {
    width: 200px;
    height: 100px;
}
.base {
    float: left;
    border: 10px solid green;
}
.regular {
    height: 50px;
    border: 10px solid blue;
}
p {
    border: 10px solid red;
}

<div class="base"></div>
<div class="regular"></div>
<p>Some text</p>

现在我不明白两件事：

为什么这两个浮动元素（div.regular 和 p）与浮动 div.base 元素的左边缘对齐？我希望它们与右边缘对齐，因此它们将位于基础 div 元素旁边。
为什么 div.base 元素位于所有其他元素之上？我希望它位于底部，因为它在 HTML 流程中排在他们之前。

如果你能帮我解释一下或者给我一些资源来理解它，我将不胜感激。

Answer 1

您的两个问题都可以通过参考 CSS2.1 规范的第 9 节来回答。

Why are those two floating elements (div.regular and p) aligned to the left edge of the floated div.base element? I would expect they will be aligned to the right edge so they will be next to the base div element.

来自section 9.5：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

行框是指实际包含文本的框。在您的示例中，p 元素包含一个或多个带有单词“Some text”的行框。那些线盒被制作成围绕浮动回流。由 p 本身生成的块框（它又包含那些线框）按照第一句中的描述进行布局，仅仅是因为块框遵循与线框不同的布局规则。
Why is the div.base element above all other elements? I would expect it at the bottom since it is before them in the HTML flow.

来自 section 9.9，强调我的：
Within each stacking context, the following layers are painted in back-to-front order:
1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).
Item #3指的是div.regular和p，因为是正常流，所以是块级的，是非定位的。 #4指的是div.base，是浮动的

当
时，元素按源顺序绘制
- 您有多个属于同一类别的元素，例如当您有两个浮动元素时，或者
- 否则未在此列表中提及。

Answer 2

如果你想使用浮动，你应该有一个容器，之后你应该使用 css 文件中元素的位置：

.container{
 width: 100%px;
 height: 100%px;
 border-style: dotted;
}

.base {
    border: 10px solid green;
}
.regular {
    height: 50px;
    border: 10px solid blue;
}
p {
    border: 10px solid red;
}

<div class="container">
        <div class="base">div1</div>
        <div class="regular">div2</div>
        <p>Some text</p>
   </div>

基本 CSS 浮动元素行为

Basic CSS floating elements behavior

html

css

css-float