Создание блоков равной ширины
С помощью свойства float легко расположить блоки содержимого рядом друг с другом.
Что такое box-sizing? Когда вы добавляете отступы или рамки, плавающий блок может перенестись на новую строку. Свойство box-sizing включает отступ и рамку в общую ширину и высоту блока, поэтому макет не ломается.
Пример
Три блока плавают рядом друг с другом, каждый шириной в треть, с box-sizing: border-box, сохраняющим отступ внутри.
<style> установите box-sizing в border-box для *, затем создайте класс .box, плавающий слева, шириной 33.33%, с отступом и рамкой. Добавьте три блока, чтобы они располагались рядом, не ломая макет.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the boxes */
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
Изображения рядом друг с другом
Та же сетка плавающих блоков может использоваться для отображения изображений рядом друг с другом.
Пример
Три контейнера изображений плавают рядом друг с другом, каждый шириной в треть.
<style> установите box-sizing в border-box для *, затем создайте класс .img-container, плавающий слева, шириной 33.33%, с небольшим отступом. Поместите цветной блок (заменяющий изображение) внутрь каждого. Добавьте три контейнера.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}
.img {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
</body>
</html>
Создание блоков равной высоты
Нелегко сделать плавающие блоки одинаковой высоты, если их содержимое отличается. Быстрое решение — задать блокам фиксированную высоту.
Пример
Фиксированная высота 500px делает плавающие блоки одинаковой высоты даже при разном содержимом.
<style> установите box-sizing в border-box для *, создайте класс .box, плавающий слева с шириной 33.33%, с отступом и рамкой, и задайте блокам фиксированную высоту 500px, чтобы все они совпадали. Добавьте два блока с разным количеством текста.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 20px;
border: 1px solid #4CAF50;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<h2>Box 1</h2>
<p>Some short content.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p>More content here. Even though the two boxes have different amounts of text, the fixed height of 500px keeps them the same height.</p>
</div>
</body>
</html>
Меню навигации
Вы также можете использовать float для создания меню навигации, делая элементы списка плавающими, чтобы ссылки располагались рядом друг с другом. PromptCookbook ссылается на полный пример для этого.
Все свойства CSS Float
Краткий обзор свойств, связанных с float:
box-sizing— задаёт, как рассчитываются общая ширина и высота элемента.clear— задаёт, что происходит с элементом рядом с плавающим элементом.float— задаёт, обтекается ли элемент и как.overflow— задаёт, что происходит, когда содержимое переполняет элемент.