Ответ 1

Взаимодействие полей и плавающих элементов

Демо-версия HTML и CSS: http://jsfiddle.net/audetwebdesign/2Hn7D/

В этом примере .wrap - это родительский элемент, содержащий элемент блока с фиксированной шириной 600px и по горизонтали, используя стандартный метод, margin: 0 auto.

Внутри родительского блока есть элемент уровня блока, div.marginfix с некоторым текстом (для целей иллюминации). Таким образом, div.marginfix находится в нормальном потоке и в контекст форматирования блока. Его ширина будет расширяться, чтобы заполнить ширину родительского контейнер.

Родительский блок также содержит два плавающих элемента, div.one и div.two, плавающие слева и справа соответственно, оба имеют width: 200px.

Браузер, совместимый с CSS, будет следовать модели форматирования блока CSS, чтобы выложить содержимого следующим образом:

(1) Игнорировать перемещенные элементы, а затем вычислить макет для остальных (.marginfix), корректировка для поля, заполнения, высоты строки, встроенные элементы и т.д.

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

(3) Отрегулируйте ширину строк (мнимые поля вокруг текста в ребенок div 's), если необходимо, чтобы текст нормальных элементов потока обтекание плавающих элементов.

Основной пример

В простейшем случае текст внутри .marginfix обертывается вокруг двух плавающих элементов и продолжается до левого и правого краев родительского элемента после текст очистил поплавки.

Пример 2 - Добавление полей

Если вы добавляете левое и правое поля в .marginfix, ширина вложенного div вычисляется как {width of parent - left margin - right margin}, поэтому текст ограничивается центром макета. Аналогичный эффект будет используя прокладку.

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

Пример 3 - Изменение порядка элементов

При использовании поплавков порядок элементов имеет значение.

Рассмотрим следующую вариацию, поместите .marginfix между двумя плавающими div 's:

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

В этом случае текст из .marginfix будет обернут вокруг левого перемещенного элемента.

Однако теперь после блока в потоке появляется элемент с правопорядком, и для этого причина, элемент .two сбрасывается вправо (как и ожидалось) и снизу край ближайшего элемента уровня блока, в этом случае .marginfix.

Любые поля или отступы, применяемые к .marginfix, просто увеличивают высоту элемент притока и div.two по-прежнему будут расположены после него (см. Пример 4).

Пример 5 - Создание контекста форматирования нового блока

Он применяет overflow: hidden к .marginfix, модель форматирования CSS запускает новый контекст форматирования блока, что означает, что .marginfix не будет расширяться за пределами любых ребер любых смежных плавающих элементов.

В этом примере текст из .marginfix больше не обтекает левый плавающий элемент.

Как и прежде, правая плавающая div по-прежнему расположена после .marginfix, поскольку .marginfix все еще является элементом уровня блока.

Ответ 2

Как floats работают - они удаляются из обычного потока контента. Если вы хотите заставить .marginfix сидеть ниже остальных, добавьте .marginfix{clear: both;} в свои стили.

Ответ 3

Когда вы плаваете любой элемент влево, другие элементы идут в одной строке макета, если вы не очистили поплавки и почему marginfix устанавливается точно после того, как поплавок остался, даже если вы не задали разницу значение marginfix, а оставшиеся элементы идут влево по левому краю от линии (когда достигается one высота) и, вероятно, two, если ваш one and two не имеет высоты как marginfix, но здесь у вас есть установите marginfix значение поля, чтобы оно оставалось в том же столбце.

Играйте с этой скрипкой

Ответ 4

Это произошло потому, что были перемещены оба класса .one и .two, оставив между ними пробел 100px. То, где будет заполнено .marginfix. Если вы хотите, чтобы .marginfix располагался под ними и был выровнен по центру, назначьте clear:both;, чтобы поместить его под ними, и используйте margin:0 auto;, чтобы сделать его центрированным.

Ответ 5

re: ваше редактирование - свойство css "clear" делает текущий элемент сидеть ниже любых плавающих элементов, которые появляются перед ним в вашем HTML. Поэтому, если вы измените свой HTML на следующее:

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

div class= "один" будет "очищен", но div class "two" не будет.

Ответ 6

Играйте с jsfiddle. Я превратил ваш код в скрипку. И для каждого div есть другой цвет фона. Играйте с различными значениями поплавка. И изменение в макете будет ясным для вас из разных цветов ящиков.

inherit
left - floats the box to the left with surrounding content flowing to the right.
right - floats the box to the right with surrounding content flowing to the left.
none (default)

Если вы не хотите, чтобы следующий флажок обертывал плавающие объекты, вы можете применить свойство clear:

clear: left will clear left floated boxes
clear: right will clear right floated boxes
clear: both will clear both left and right floated boxes.

Обратитесь html dog tutorial на макет страницы для получения более подробной информации о макете с помощью css

Ответ 7

Поплавки удаляются из обычного потока содержимого. Когда вы применяете float к полям div, не видите floated div как фактический элемент, который до тех пор, пока вы не примените clear: both. см. jsfiddle

.one{
 width: 200px;
 float: left;
 clear: both;
}

.two{
  width: 200px;
  float: right;
  clear: both;
}

.marginfix{
   margin: 0 210px;
}

Теперь кажется, что вы пытаетесь достичь позиционирования, когда marginfix подталкивает div к середине. Если это концепция, укажите отображение: block on marginfix. См. jsfiddle

.one{
  width: 200px;
  float: left;
}
.two{
 width: 200px;
 float: right;
}
.marginfix{
  margin: 0 210px;
  clear: both;
}

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

Вот еще проблема незнакомца. Когда оба поплавка влево и вправо очищают, как правая поплавка сбрасывается. Но если вы приложите четкость: оба в marginfix, это отталкивает его, как в первом примере.

Ответ 8

Я думаю, что первый ответ Chapurlink имеет смысл, модифицирует его скрипку, см. ответ,

который работает так, как вы объяснили/ожидали, белый ящик - div три с clear:both

См. fiddle

Я надеюсь, что это связано с вашим вопросом.

Ответ 9

 This is HTML:
 =================

 <div id="container">
    <div id="one"><h1>hello world1</h1></div>
    <div id="two"><h1>hello world2</h1></div>
    <div id="three"><h1>hello world3</h1></div>
 </div>

 CSS
 ====
  #container
    {
        height: 1024px;
        width: 760px;
        position: fixed;
    }

    #one
    {
        margin-left: 10px;
        position: relative;
        border: 2px solid red;
        width: 220px;
    }
    #two
    {
        margin-left: 272px;
        position: absolute;
        border: 2px solid Blue;
        width: 220px;
        float: right;
    }
    #three
    {
        border: 2px solid Green;
        float: right;
        margin-top: -86px;
        position: relative;
        width: 220px;
    }