如何阻止文本环绕浮动块？

You can see what the issue is by looking here

你可以在这里看到问题所在

As you can see the article text is wrapping around the aside, which I've moved relative of it's current position.

正如你所看到的那样,文章文字正在旁边,我已经相对于它的当前位置而移动了。

Here's the relevant css:

这是相关的CSS:

aside {
    float: left;
    z-index: -1;
    padding: 10px;
    position: relative;
    right: 275px;
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0));
    width: 230px;
    box-shadow: 0px 5px 0px rgb(0,90,0);
}

article {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    background-color: rgb(0,175,0);
    width: 540px;
}

I don't want this to happen. I've tried making the position of the aside absolute, which is a solution, but is there a way I can do it this way?

我不希望这种情况发生。我已经尝试过一个绝对的位置,这是一个解决方案,但有这样我可以这样做吗?

2 个解决方案

#1

This is how position: relative works. In simple words: the element occupies the space as it normally would but displays at the specified left/top position relative to its original position.

这就是位置:相对的作用。简单来说:元素占据通常的空间,但相对于其原始位置显示在指定的左/顶部位置。

The solution is to remove relative positioning and use negative left margin instead of left/right:

解决方案是删除相对定位并使用负左边距而不是左/右:

aside {
    float: left;
    padding: 10px;
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0));
    width: 230px;
    box-shadow: 0px 5px 0px rgb(0,90,0);
    /* remove              */
    /* z-index: -1;        */
    /* position: relative; */
    /* right: 275px;       */
    /* insert              */
    margin-left: -260px;
}

#2

You can fix that using absolute position, change your styles to this:

您可以使用绝对位置修复它,将样式更改为:

section {position: relative}
aside {position: absolute; left: -275px; top: 80px;

Butm it's only fix of your bad HTML markup, correct way is to float both, aside and article elements without positioning.

但是它只能修复你糟糕的HTML标记,正确的方法是将两者,旁边和文章元素浮动而不进行定位。

#1