Почему Float лучше, чем позиция: относительная и абсолютная, в то время как мы можем быстро сделать макет с позицией?

Ответ 1

float не нарушит поток документов - он также разместит любой элемент, который он использует, наилучшим образом, который он может уместить в ширине контейнера - скажем, у меня есть 5 x 200px div в контейнере шириной 800px, последние 5-ые будут в " Новая строка "ниже остальных - используя position:relative, вам нужно будет рассчитать, когда ему нужно разбить себя, и он не будет ломаться правильно, так как display будет либо block и проходить по всей ширине, либо будет inline-block или inline которые не будут отображаться для div так же, как block, и в значительной степени испортят поток документа и макет.

Это зависит от того, что вы хотите сделать: position:relative используется, чтобы переместить элемент немного в сторону от его естественного местоположения, тогда как float заставит его переместиться в крайнее левое или крайнее правое положение в родительском элементе. position:absolute позволит вам расположить его относительно ближайшего расположенного предка (вместо позиционирования относительно окна просмотра, как зафиксировано). Тем не мение; если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.

Ответ 2

Абсолютное позиционирование выводит элемент из обычного потока документов. Любой абсолютно позиционированный элемент полностью игнорируется при нормальных элементах.

Это ломается во многих сценариях. Главное, что приходит в голову, - это подставить элементы друг под друга. В примере с столбцом убедитесь, что вы можете полностью позиционировать 3 столбца, но вы не можете помещать что-либо ниже этого на страницу, потому что поток по-прежнему находится в верхней части страницы. "Абсолютные" элементы не влияют на последующий контент.

С поплавками вы просто кладете элемент потом и обматываете вокруг или под плавающими.

Это не значит, что это бесполезно. Позиционирование очень полезно, когда вы хотите всплывать "слой" над веб-страницей.

Короткий пример... возьмите этот общий сценарий HTML:

<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>

<h2>Second section title</h2>
...

С помощью float вы должны использовать этот CSS:

.column1, .column2, .column3 {
  float: left;
  width: 200px;
}
h2 {
  clear: both;
}

И все будет хорошо. Пусть вместо этого помещаются столбцы:

.column1, .column2, .column3 {
  position: absolute;
  width: 200px;
  top: 30px; /* enough to miss the first h2 */
}
.column1 {
  left: 0;
  background: pink;
}
.column2 {
  left: 200px;
  background: lightgreen;
}
.column3 {
  left: 400px;
  background: lightblue;
}

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

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

Честно говоря, просто попробуйте и попытайтесь создать хороший макет, используя абсолютное позиционирование. Вы скоро поймете его недостатки.

Ответ 3

Float не лучше Position, а Position не лучше Float - оба должны использоваться в правильной ситуации. Я бы порекомендовал вам прочитать книгу http://www.transcendingcss.com/, если вы хотите узнать больше о том, когда использовать ее, и стилизации CSS в целом.

См. здесь пример: http://transcendingcss.com/blog/about/changingman_layout_updated/

Ответ 4

Абсолют: ваш элемент помещается в первый родительский элемент с позицией, отличной от статической (он должен быть явным, даже если позиция по умолчанию относительна)

Относительно: ваш элемент расположен до последнего брата с относительным положением

Float: например, если он ушел, ваш элемент будет перемещаться так далеко, насколько это возможно, влево (в зависимости от другого элемента и его ширины элементы до этого не будут затронуты, элементы после него обтекают.

Ссылка:

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/css_float.asp

Ответ 5

мы используем float, поскольку absolute позиционирование не работает для столбцов переменной высоты.

Когда вы указываете position:absolute, элемент удаляется из документа и помещается именно там, где вы говорите ему, чтобы идти

Если вы укажете position:relative, вы можете использовать верхнюю или нижнюю часть, а влево или вправо - перемещать элемент относительно того места, где оно обычно происходит в документе.

Источник: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Ответ 6

Я согласен с Frozenskys, но на самом деле не лучше, но float сохраняет элемент в потоке документа, в то время как позиция удаляет элемент из потока документа, поэтому я нашел, что float работает лучше в других браузерах, а мой IE-специфический CSS меньше, Я использую float

Ответ 7

Как упоминалось выше, это не общая проблема лучше/хуже, но:

Абсолютное позиционирование удаляет элемент из потока документов. Элемент с абсолютным позиционированием больше не будет влиять на расположение других элементов документа.

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

Ответ 8

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

Ответ 9

Я знаю, что это старая строка, но здесь: я обнаружил, что когда у меня есть полная информация о характере и количестве контента, а характер и объем контента не изменятся, то атрибуты позиционирования дают мне больше контроля над мой внешний вид макета. Если характер и количество контента требуют большей гибкости из-за частых изменений, то float даст мне такую ​​гибкость, но обычно не дает мне такого контроля над внешним видом.

Мне не всегда нужна точность позиционирования, но я рад, что он там, когда мне это нужно.

Конечно, это также зависит от того, насколько хорошо вы знаете свой html/css и сколько времени вы готовы потратить на кодирование, чтобы обойти ограничения для одного или другого атрибута.

Например, <h2> дает вам большой жирный заголовок заголовка, понятный для всех браузеров, но вы можете сделать то же самое с <p>, если вы хотите добавить атрибуты стиля, чтобы сделать свой жирный заголовок конструированными особенностями. Это больше работает, в основном ненужно, но может быть сделано.

Как правило, лучше делать как можно меньше кодирования, используя установленные элементы, атрибуты и значения и как можно меньше хакеров. В этом суть стандартов HTML5. Используйте позиционирование, когда вам это нужно, но используйте float, когда сможете.

Отличный сайт. Хорошие участники. Я многому учу.