Question

这是我的jsFiddle

在我的小提琴链接中，我已经浮动了我的左侧边栏和右侧边栏。据我所知，浮动元素从html正常流程中删除。我只是不明白是不是因为它取代我的右侧边栏。

<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area">hi</div>
<div class="right-sidebar"></div>

我的css：

.content-area {
   background-color: #bbb;
   height: 310px;
}
.left-sidebar {
   float: left;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}
.right-sidebar {
   float: right;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}

Answer 1

http://www.vanseodesign.com/css/understanding-css-floats/

元素按正常流程顺序放置，从正常流程中移除，然后根据浮动向右或向左移动。您的右侧栏向下移动，因为它位于正常流程中的主要内容之后。如果您不希望它被移动，您需要更改元素的顺序。

http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

根据规范：

在浮动模型中，首先根据法线布置框流动，然后从流动中取出并向左或向右移动尽可能的。内容可能会沿着浮动的一侧流动。

Answer 2

您对position: absolute感到困惑。浮动将向左或向右移动元素，鼓励其他元素在其周围“浮动”，但它们仍然在流中，其他元素受其影响。

当您使用position: absolute时，您将从流中删除该元素，将其置于其他元素的顶部或下方。

这是你的updated fiddle。最重要的变化是这一部分：

.content-area {
    background-color: #bbb;
    height: 310px;
    position: relative;
}
.left-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}
.right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

父母也有位置，所以侧边栏可以是位置。左侧和右侧边栏分别位于父级的顶部，最左侧和最左侧。

如果仔细观察，您会看到主要内容块的内容现在位于侧栏后面。我已经将文字设置得更长了，所以你可以看到它出现在左侧栏的下方。

当然这可能不是您想要的，但您可以通过更改标记中的顺序轻松解决它。首先按照您喜欢的顺序添加侧边栏，然后添加主要内容。结果可见here。

其工作方式：在内容区域的顶部，首先启动左侧栏。它浮动到左边，鼓励下一个元素浮动在它旁边，具有相同的顶部位置。该元素将是右侧栏，向右浮动，并且还鼓励下一个元素向左浮动。主要区域没有明确的宽度，因此它表示它将适合中间的贴合，仍然从相同的顶部位置开始。

由于主元素本身不浮动，下一个元素将从主区域结束的位置开始（顶部）。因此，如果右侧栏位于主区域之后，它会向下移动，就像您的示例一样。如果主要区域内容增长，右侧栏将向下移动。

Answer 3

<div class="content-area">
<div class="left-sidebar"></div>
<div class="right-sidebar"></div>
<div class="main-area">hi</div>

您需要将主区域更改为其他两个浮动元素之后。我这样做可能看起来很奇怪，但这意味着主区域不会向下推右侧边栏，因为内容会在标记之后出现。我希望这会有所帮助。

浮动元素是否真的从正常的html流中删除了？

3 个答案: