CSS - Свойство Float: Пособие для начинающих
Здравствуйте, будущие маги CSS! Сегодня мы окунемся в神奇ный мир свойства CSS float. Не волнуйтесь, если вы никогда не писали ни строчки кода - к концу этого руководства вы будете浮動要素, как профессионал!
Что такое свойство Float?
Прежде чем окунуться в深海, начнем с азов. Свойство float - это магическая палочка в CSS, которая позволяет элементам浮動 влево или вправо от их контейнера. Представьте, что вы расставляете мебель в комнате - свойство float позволяет вам толкать вещи к сторонам, оставляя место для других элементов, чтобы они обтекали их.
Possible Values (Возможные значения)
Свойство float может принимать несколько значений, каждое из которых имеет свою особую силу:
| Значение | Описание |
|---|---|
| left | 浮動元素 к левому краю |
| right | 浮動元素 к правому краю |
| none | Элемент не浮動ается (по умолчанию) |
| inherit | Наследует значение float от родителя |
Применяется к
Свойство float может быть применено к большинству HTML-элементов, ноаще всего его используют с:
- Изображениями
- Divami
- Абзацами
- Заголовками
Синтаксис
Вот базовый синтаксис для использования свойства float:
селектор {
float: значение;
}например:
img {
float: left;
}Это сделает все изображения на вашей странице浮動ающимися влево.
CSS Float - Равные по ширине столбцы
Давайте начнем с практического примера. Представьте, что вы создаете веб-сайт для кондитерской, и хотите display три вида пирожных рядом. Вот как вы можете использовать float для создания равных по ширине столбцов:
<div class="pastry-container">
<div class="pastry">Croissants</div>
<div class="pastry">Éclairs</div>
<div class="pastry">Macarons</div>
</div>.pastry-container {
width: 100%;
}
.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}В этом примере мы浮動аем каждый элемент с пирожным влево и даем ему ширину 33.33% (100% разделено на 3). box-sizing: border-box обеспечивает то, что отступы включены в расчет ширины.
CSS Float - Равные по высоте столбцы
Теперь представьте, что вы хотите, чтобы эти столбцы имели одинаковую высоту, независимо от содержимого. Мы можем использовать一个小кий трюк с отступами и margin:
.pastry-container {
overflow: hidden;
}
.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}Это создает иллюзию одинаковой высоты столбцов, добавляя большой padding-bottom и равный отрицательный margin-bottom.
CSS Float - Изображения рядом
Давайте добавим несколько аппетитных изображений пирожных на наш веб-сайт кондитерской:
<div class="image-container">
<img src="croissant.jpg" alt="Croissant">
<img src="eclair.jpg" alt="Éclair">
<img src="macaron.jpg" alt="Macaron">
</div>.image-container {
width: 100%;
}
.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}Это отобразит наши изображения пирожных рядом, каждый из которых займет треть ширины контейнера.
CSS Float - Гибкие ящики
Но что, если мы хотим, чтобы наш макет был более гибким? Встречайте flexbox, супергероя современных макетов CSS:
.pastry-container {
display: flex;
flex-wrap: wrap;
}
.pastry {
flex: 1 0 300px;
margin: 5px;
}Это создает гибкий макет, где каждый ящик с пирожным будет не менее 300px в ширину и будет увеличиваться, чтобы заполнить доступное пространство.
CSS Float - Меню навигации
Floatы часто используются для создания горизонтальных меню навигации. Давайте создадим меню для нашей кондитерской:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>nav ul {
list-style-type: none;
padding: 0;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}Это создает горизонтальное меню навигации с каждым элементом,浮動ающимися влево.
CSS Float - Веб-макет
Floatы могут быть использованы для создания целых веб-макетов. Вот простой пример двухколоночного макета:
<div class="container">
<header>Welcome to Our Bakery</header>
<nav>
<!-- Элементы навигации здесь -->
</nav>
<main>
<article>Our Story</article>
<aside>Today's Special</aside>
</main>
<footer>Contact Us</footer>
</div>.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
header, nav, footer {
width: 100%;
clear: both;
}
main {
width: 100%;
}
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}Это создает макет с основной областью содержимого и панелью侧面.
CSS Float - Абзац
Floatы можно использовать, чтобы обернуть текст вокруг изображений:
<div class="content">
<img src="baker.jpg" alt="Our Master Baker" class="float-left">
<p>Meet our master baker, Chef Pierre. With over 30 years of experience...</p>
</div>.float-left {
float: left;
margin-right: 15px;
}Это сделает текст обернутым вокруг изображения нашего главного пекаря.
CSS Float - Изображения с отступами
Добавление отступов к浮動анным изображениям может улучшить читаемость:
img {
float: left;
margin: 0 15px 15px 0;
}Это добавляет немного места вокруг наших浮動анных изображений.
CSS Float - Нет浮動ации
Иногда вам нужно предотвратить浮動ацию элемента. Свойство clear приходит на помощь:
.no-float {
clear: both;
}Это обеспечивает, чтобы элемент с классом no-float появился_below любого浮動анного элемента.
CSS Float -浮動ация влево или вправо
Не забывайте, что вы можете浮動ать элементы влево или вправо:
.float-left {
float: left;
}
.float-right {
float: right;
}CSS Float - Перекрытие изображений
Будьте осторожны! Floatные элементы могут перекрываться, если недостаточно места. Вы можете предотвратить это с помощью правильной清理ки:
.clearfix::after {
content: "";
display: table;
clear: both;
}Добавьте этот класс к родительскому контейнеру浮動анных элементов, чтобы предотвратить перекрытие.
CSS Float - Изображения не смежные
Иногда вы хотите, чтобы浮動анные изображения оставались в исходном порядке:
img {
float: left;
clear: left;
}Это обеспечивает, чтобы каждое изображение начиналось с новой строки.
CSS Float -浮動ация_below предшественников
Чтобы сделать элементы浮動ающими_below своих предшественников:
.float-below {
clear: both;
float: left;
}Это очищает любые предыдущие浮動ации и затем浮動ает элемент.
CSS Float - На новую строку
Чтобы强制 элемент перейти на новую строку после浮動анных элементов:
.new-line {
clear: both;
}CSS Float - Связанные значения
Вот таблица связанных свойств и значений:
| Свойство | Значения |
|---|---|
| float | left, right, none, inherit |
| clear | left, right, both, none, inherit |
| overflow | visible, hidden, scroll, auto |
И вот вы,folks! Вы только что сделали свои первые шаги в мир CSS浮動ов. Помните, что практика makes perfect, так что не бойтесь экспериментировать с этими техниками. Before you know it, вы будете создавать красивые,浮動анные макеты, которые сделали бы гордым даже самого опытного веб-дизайнера. Happy coding!
Credits: Image by storyset