Как я могу получить плавающий CSS, чтобы перекрыть таблицу?

Question

Как получить плавающий элемент для перекрытия таблицы?Он отлично перекрывает другие элементы div, но таблица, похоже, вызывает clear.

В моем примере div перекрывается (что я хочу), но таблица ниже очищает пропущенный элемент (чего я не делаю).

Пример здесь: http://cssdesk.com/9rZVs. (IE, кажется, жарит это, поэтому я тоже вставлю это здесь.)

HTML:

<div>
  <span style="float:right;width:40%;">
    content content content content content
    content content content content content
    content content content content content
  </span>
  content content content content...
</div>

<div>
content content content content content 
content content content...
</div>

<table ><tr><td>1</td></tr></table>

CSS:

table {
 width:300px;
 border: 1px solid black;
}
span {
 border:2px solid black;
 background-color: #ddd;
 margin: 2px solid gray;
}
div {
 border:2px solid black;
 background-color: #fff;
 margin: 2px solid gray;
 width: 200px;
 padding: 10px;
}

Answer 1

Вы можете получить функциональность, к которой вы стремитесь, вот так:

<div style="position:relative">
  <span style="position:absolute;right:0;width:40%;">
    content content content content content
    content content content content content
    content content content content content
  </span>
  content content content content...
</div>

См. здесь . Похоже, табличное отображение очищает любое число с плавающей запятой (из всех тестов, которые я проводил). Я бы порекомендовал использовать вышеупомянутое решение для достижения этого результата - вместо использования поплавков.

Answer 2

Я не уверен, что это правильно, но предоставления вашей таблицы display: block; достаточно, чтобы она работала так, как вы хотите.

Вы можете проверить это, отредактировав стили на своем примере.