| Kosten | Среда, 07 Марта 2018, 00:34 | Сообщение 1 |
| Понятие floats, является одной из самых интуитивных концепций в стилистике CSS, в том, что они плавают во всех контексте, что вызывает проблемы чтения и удобства использования. Однако причиной этих проблем является не сама теория, а способ интерпретации теории разработчиками и браузерами. Более подробно рассмотрите теорию плавания, вы узнаете, что это не так сложно, как может показаться. Просмотрев десятки связанных статей и выбрали самые важные вещи, которые вы должны иметь в виду, разрабатывая макеты css с плавающей точкой.
CSS float - это свойство, которое заставляет любой элемент плавать "вправо, влево" и внутри своего родительского тела с остальной частью элемента, чтобы обернуть его. Это свойство можно использовать для размещения изображения или элемента внутри его контейнера, а другие встроенные элементы будут обтекать его.
Плавающие элементы существуют вне нормального потока документов, что является причудливой фразой, что в основном говорит о том, что порядок, в котором элемент появляется в исходном коде, определяет, где он должен появиться на последней отображаемой странице. Плавающие и позиционированные элементы находятся вне нормального потока документов. Но поплавки не ведут себя как обычный позиционированный элемент.
Абсолютный или фиксированный позиционированный элемент полностью оставляет поток документа и помещается поверх обычного документа, а пространство, которое было бы занято этим элементом в нормальном потоке документа, закрывается. Относительно позиционированные элементы также оставляют нормальный поток документов, но пространство, которое они занимают в документе, не закрывается: оно остается открытым и в том же месте элемент первоначально сидел независимо от того, куда движется элемент.
Поплавки разные. Они оставляют поток документов, и пространство, которое они занимают, зарезервировано, как в относительно позиционированном элементе, но это пространство перемещается вместе с элементом. Обычный поток документов затем делает все возможное, чтобы обтекать этот элемент.
1 Версия: Плавающий одиночный элемент
Итак, давайте начнем играть с поплавками. Мы будем использовать пример, который часто бросает людей на цикл. Допустим, у вас есть div, что содержит изображение, что вы планируете плавать, плюс абзац описательного текста, который вы хотите обтекать.
Наш HTML код может выглядеть так:
Код <!DOCTYPE html> <html> <head> <title>CSS float left</title> <!-- Include CSS file here --> <link href="css/style.css" rel="stylesheet"> </head> <body> <p>ZorNet: Создание сайта на uCoz</p> <p><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/3CTjmPEyRyCciUp7Mdl8xg.png"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </body> </html>
В этом примере мы предоставим нашему контейнеру и изображению границу в дополнение к плаванию нашего изображения, чтобы мы могли видеть, как они себя ведут.
Вот наш CSS:
Код img {
float: left;
width: 185px;
height: 130px;
margin: 3px;
}
Демонстрация:
Короче говоря, в любое время, когда ваш плавающий элемент больше, чем его контейнер, он, похоже, переполнит этот контейнер. Как мы установили ранее, поплавки существуют вне обычного потока документов, например, позиционированных элементов. Они не способствуют росту их контейнера вообще. Высота контейнера в нашем примере определяется содержанием абзаца.
2 Версия: Плавающий одиночный элемент
Здесь мы увидим, как элемент перемещается внутри контейнера с помощью примера.
HTML
Код <div class="zornet_ru_gtukem"> <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/3CTjmPEyRyCciUp7Mdl8xg.png" class="float" /> <p>Здесь описание на материал.</p> </div>
CSS
Код .zornet_ru_gtukem {
margin: 1em 0;
border: 0px solid white;}
.float {
float: left; }
img {
border: 2px solid #74ccfd;
margin: 0 .7em 0 0;
}
Демонстрация:
Обратите внимание, что я также указал ширину на контейнере, когда я его разместил: плавающие элементы всегда должны иметь ширину, или браузеры могут определять свою ширину по-разному. Технически говоря, ширина контейнера должна быть такой же большой, как и самый большой элемент, содержащийся в элементе.
Но когда мы имеем дело с текстом, который усложняется, и будет ли наибольший элемент самым длинным предложением или самым длинным словом. Изображения являются исключением из этого правила, потому что изображения имеют подразумеваемую ширину.
| | Страна: (RU) |
| |
