as in original. Ensure no extra tags outside body.Let's rewrite paragraphs.Paragraph 1:"Свойство float даёт элементу свободу перемещения – он может сместиться влево или вправо относительно родительского блока. Если ширина плавающего элемента явно не задана, то он автоматически подстраивается к размеру своего содержимого."Add exclamation? maybe "- это просто замечательно!"Paragraph 2:"Браузер читает ваш документ сверху вниз. Когда доходит до плавающего элемента, сначала браузер размещает его в потоке как обычный блок, а затем «выводит» из потока и перемещает к максимально возможному левому или правому краю родителя."Paragraph 3:"После того как плавающее чудо удалено из потока, последующие блочные элементы просто сдвигаются на его место, будто этого элемента там никогда не было."Paragraph 4:"Однако даже без присутствия в потоке, плавающий элемент всё равно оказывает влияние: строчное содержимое (текст, изображения и другие inline-элементы) распознаёт его границы и обтекает его!"Paragraph 5:"В одном ряду можно разместить несколько плавающих элементов, если ширина родителя позволяет. Если места не хватает – оставшиеся элементы просто переходят на следующую строку."Paragraph 6 with list.Add note about absolute/fixed ignoring float.Tables: keep same but maybe rewrite description for left/right to be more enthusiastic. But we can keep them as is.Example block: keep width:250px;float:left and .demoHeader text "CSS Свойство:" maybe change to "Свойство CSS в действии!" but it's fine.We also need to preserve the
etc.Ok produce final HTML.Also ensure we don't use fancy characters that might be considered too creative. But it's okay.Let's craft.
Свойство float даёт элементу свободу перемещения – он может сместиться влево или вправо относительно родительского блока. Если ширина плавающего элемента явно не задана, то он автоматически подстраивается к размеру своего содержимого.
Браузер читает ваш документ сверху вниз. Когда доходит до плавающего элемента, сначала браузер размещает его в потоке как обычный блок, а затем «выводит» из потока и перемещает к максимально возможному левому или правому краю родителя.
После того как плавающее чудо удалено из потока, последующие блочные элементы просто сдвигаются на его место, будто этого элемента там никогда не было.
Однако даже без присутствия в потоке, плавающий элемент всё равно оказывает влияние: строчное содержимое (текст, изображения и другие inline-элементы) распознаёт его границы и обтекает его!
В одном ряду можно разместить несколько плавающих элементов, если ширина родителя позволяет. Если места не хватает – оставшиеся элементы просто переходят на следующую строку.
Классический подвох - плавающие объекты обычно не «толпятся» в высоту родителя, поэтому контейнер может оказаться пустым. Но у нас есть два простых способа решить эту проблему:
- Установить фиксированную высоту – идеально, если вы заранее знаете нужный размер.
- Воспользоваться свойством
overflow: auto (или hidden) – тогда контейнер сам пересчитает высоту так, чтобы учесть плавающие элементы.
Примечание: Если элемент позиционирован абсолютно или фиксировано, свойство float к нему не применимо.
| Значение по умолчанию: | none |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.cssFloat="left" |
| Значение | Описание |
| left | Элемент плавно скользит влево. |
| right | Элемент плавно скользит вправо. |
| none | Элемент не является плавающим и будет отображаться точно там, где он расположен. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример