浮动元素是否真的从正常的html流中删除？ [英] Are floated element really removed from normal html flow?

问题描述

以下是我的 jsFiddle

在我的小提琴链接我漂浮了我的左边栏和右边栏。根据我的知识，浮动元素从html正常流中删除。我只是不明白是否是为什么它取代了我的右边栏。

In my Fiddle link i have floated my left-sidebar and right-sidebar. As per my knowledge floated element are removed from html normal flow. i just did not understand if it is so why it is displacing my right-sidebar.

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

my 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;
}

推荐答案

c $ c> position：absolute 。浮动将向左或向右移动元素，鼓励其他元素在其周围浮动，但它们仍然在流中，其他元素也会受其影响。

You are confused with position: absolute. Floating will move an element to the left or right, encouraging other elements to 'float' around it, but they will still be in the flow and other elements are influenced by it.

当您使用 position：absolute 时，从流中移除元素，将其放置在其他

When you use position: absolute, you remove the element from the flow, placing it on top or below other elements.

这是您的更新的小提琴 。最重要的变化在这部分：

Here is your updated fiddle. The most important changes are in this part:

.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;
}

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

The parent is given a position too, so the sidebars can be positions in it. The left and right sidebar are positioned at the top of the parent and on the far left and far right respectively.

如果仔细观察，您会看到主内容块的内容现在位于侧边栏的后面。

If you look closely, you see that the contents of the main content block are now behind the side bars. I've made the text a bit longer, so you can see it appearing from underneath the left bar.

当然，这可能不是你想要的，但你可以看到它。通过改变您的标记的顺序很容易解决。首先按照你喜欢的顺序添加侧边栏，然后添加主要内容。结果可以在此处查看。

Of course this is probably not what you want, but you can solve it quite easily by changing the order in your markup. First add the sidebars in whichever order you like, and then add the main content. The results can be seen here.

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

The way this works: at the top of your content-area, the left side bar is started first. It floats to the left, encouraging the next element to float next to it, having the same top position. That element would be the right side bar, which float to the right, and also encourages the next element to float left of it. The main area doesn't have an explicit width, so it figures that it would fit snuggly inbetween, still starting at the same top position.

由于主要元素本身不会浮动，下一个元素会在主要区域结束处开始（上方）。因此，如果正确的酒吧将在主区域之后，它向下移动，就像你的例子。如果主区域内容增长，右边的条将进一步向下移动。

Since the main element itself doesn't float, the next element will start (top) where the main area ends. So if the right bar would come after the main area, it shifts down, like in your example. The right bar would move even further down if the main area contents grow.

这篇关于浮动元素是否真的从正常的html流中删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！