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

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

Относительный: ваш элемент позиционируется по отношению к своему последнему брату с относительной позицией

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

Ссылка:

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение общего назначения (особенно для нормализации поиска и генерации пробок) - это модуль unidecode:

http://pypi.python.org/pypi/Unidecode

Это порт модуля Text:: Unidecode для Perl. Он не является полным, но он переводит все латинские символы, которые я мог найти, транслитерирует кириллицу, китайский и т.д. на латиницу и даже правильно обрабатывает символы полной ширины.

Это - вероятно, хорошая идея просто раздеть все знаки, которые вы не хотите иметь в заключительной продукции или заменять их наполнителем (например, «äßœ $» будет unidecoded к «assoe$» , таким образом, вы могли бы хотеть разобрать небуквенно-цифровой индикатор). Для символов он будет транслитировать, но не должен (скажем, § = > SS и € = > EU ) нужно очистить ввод:

input_str = u'äßœ$'
input_str = u''.join([ch if ch.isalnum() else u'-' for ch in input_str])
input_str = str(unidecode(input_str)).lower()

Это заменит все не буквенно-цифровые символы фиктивной заменой, а затем транслитировать последовательность и превратить его в строчный регистр.

§ 2,14,15 Последовательности Литералы, раздел 7

Узкий ряд литерал имеет тип «массив n const char», где n - размер последовательности, как определено ниже, и имеет статическое место хранения длительность .

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

Это разрывается во многих сценариях. Главное, что порождает ум, это положить элементы друг под другом. В примере столбца убедитесь, что вы можете абсолютно позиция 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>
...

С поплавками, вы бы использовать этот 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;
}

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

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

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