Margin-top не работает с четким: оба

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

ОТВЕТЫ

Ответ 1

Вы можете поместить два плавающих divs в другой, который получил "переполнение: скрытый":

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

Ответ 2

В то время как Pointy показывает, как вы можете обернуть поплавки в div, в качестве альтернативы вы можете вставить пустой div между поплавками и секцией основных данных. Например:

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both;"></div>
<div style="margin-top: 200px;">Main Data</div>

Это может оказаться полезным в случаях, когда добавление обертки div вокруг некоторого HTML нежелательно.

Ответ 3

У Pointy и Randall Cook есть отличные ответы. Я думал, что покажу еще одно решение.

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="float: left; clear: both; margin-top: 200px;">Main Data</div>

Если вы сделаете третий элемент "float: left;" И "clear: both;", он должен иметь желаемый эффект, чтобы дать 3-му элементу маркер 200 пикселей. Здесь Ссылка на пример.

Это также может повлиять на другие элементы последующих действий относительно того, нужно ли им плавать или нет. Однако он также может иметь желаемый эффект.

Ответ 4

Логика, лежащая в основе этой спецификации, является изгибом ума и связана с сложным взаимодействием правил для разрешение и сворачивание полей.

Вероятно, вы знакомы с обычной коробкой моделей в которой поле содержимого содержится в поле дополнения, содержащемся на границе в поле поля:

Диаграмма box model

Для элементов с clear установлено значение, отличное от none, к этой модели может быть добавлен дополнительный компонент: зазор.

Значения, отличные от "none", потенциально могут привести к оформлению. Зазор препятствует свертыванию маржи и действует как интервал над верхним краем элемента.

Другими словами, модель коробки в этих случаях действительно выглядит больше:

Модель коробки с

Но когда вводится оформление, и насколько это важно? Начнем с первого из этих вопросов. Спецификация говорит:

Вычисление зазора элемента, на котором установлен "ясный", выполняется путем определения гипотетического положения верхнего края границы элемента. Это положение, где фактический верхний пограничный край был бы, если бы свойство "clear" элемента было "none".

Если это гипотетическое положение верхнего края границы элемента не проходит мимо соответствующих поплавков, тогда вводится зазор, а поля сворачиваются в соответствии с правилами в 8.3.1.

Примените эту логику к коду вопроса. Помните, мы пытаемся объяснить позицию третьего div в коде ниже (фоны, добавленные для помощи в визуализации):

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>

Ответ 5

Альтернативное решение:

Фактически вы можете разместить margin-bottom на плавающих элементах DOWN под элементом, который имеет clear: both.

http://jsfiddle.net/9EY4R/

enter image description here

Примечание. Сделав это предложение, я должен немедленно отменить его, как правило, не очень хорошую идею, но в некоторых ограниченных ситуациях может быть уместен;

<div class='order'>

    <div class='address'>
        <strong>Your order will be shipped to:</strong><br>
        Simon</br>
        123 Main St<br>
        Anytown, CA, US
    </div>

    <div class='order-details'>
        Item 1<br>
        Item 2<br>
        Item 3<br>
        Item 4<br>
        Item 5<br>
        Item 6<br>
        Item 7<br>
        Item 8<br>
        Item 9<br>
        Item 10<br>
    </div>

    <div class='options'>
        <button>Edit</button>
        <button>Save</button>
    </div>
</div>

Панель с элементами называется order-details с этим css

.order-details
{
    padding: .5em;
    background: lightsteelblue;

    float: left;
    margin-left: 1em;

    /* this margin does take effect */
    margin-bottom: 1em;
}

В приведенной выше скрипте - желтая панель имеет margin-top, но если она больше самого высокого поплавкового элемента, то она ничего не сделает (конечно, вся суть этого вопроса).

Если вы установите для margin-top желтой панели значение 20em, тогда она будет видна, потому что маржа рассчитывается из верхней части внешнего синего поля.

Ответ 6

Вместо этого используйте "padding-top" в вашем основном div. Или, наоборот, оберните основной div данных в один с "padding-top".

Ответ 8

Иногда комбинация относительного положения и поля может решить эти проблемы.

Я использую эту технику для своих классов alignright и alignleft в WordPress.

Например, если я хочу "нижнее поле", которое соблюдается с помощью элементов очистки, которые вы можете использовать.

.alignright{
   float: right;
   margin-left: 20px;
   margin-top: 20px;
   position: relative;
   top: -20px;
}

В вашем примере вы можете сделать что-то вроде

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-bottom: 200px; position: relative; top: 200px;">Main Data</div>