html - CSS - float 元素缩进文本

Question

我正在尝试创建一个带有居中文本列的布局，以及位于右侧并“附加”到该列右侧的元素。

Demonstration codepen

定位工作正常，但中心列中的文本在 float 位置缩进。我希望它表现得好像 float 不存在一样。

当前代码:

HTML

<div>
  <aside>This is an aside that should float to the right</aside>
  <p>This paragraph should be centered in the middle of the page.</p>
</div>

CSS

div {
  width: 400px;
  margin: auto;
}

aside {
  float: right;
  clear: right;
  width: 200px;
  left: 200px;
  position: relative;
}

非常感谢任何帮助!

Answer 1

but the text in the center column is indented at the position of the float. I would like it to behave as if the float isn't there.

一个简单的实现方法是给 float 元素一个负的 margin-left ，其绝对值与您将其放置在 left 的位置相同:

div {
  width: 400px;
  margin: auto;
  background: red;
}

aside {
  float: right;
  clear: right;
  width: 200px;
  left: 200px;
  margin-left: -200px;
  position: relative;
  background: yellow;
}

<div>
  <aside>This is an aside that should float to the right</aside>
  <p>This paragraph should be centered in the middle of the page. This paragraph should be centered in the middle of the page. This paragraph should be centered in the middle of the page. This paragraph should be centered in the middle of the page.</p>
</div>