Articles
Введение в CSS
CSS-свойства, связанные с обтеканием

CSS-свойства, связанные с обтеканием

Эта статья объясняет свойства CSS, связанные с обтеканием.

Вы можете узнать о применении и синтаксисе свойств float и clear.

YouTube Video

HTML для предварительного просмотра

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

CSS-свойства, связанные с обтеканием

Свойства float и clear 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float — это одно из свойств CSS, используемое для перемещения элемента влево или вправо внутри его родительского элемента, позволяя другим элементам обтекать его. Свойство float часто используется для размещения изображений или блочных элементов вокруг текста, но его применение сократилось, так как более современные способы макетирования, такие как flex и grid, стали основными.

  • В классе float-left свойство float устанавливается в значение left. Применённый элемент перемещается к левой стороне родительского элемента, а следующий элемент обтекает его справа.
  • Класс float-right устанавливает свойство float в значение right. Применённый элемент всплывает к правой стороне своего родительского элемента, а следующий элемент обтекает его слева.
  • В классе clearfix свойство clear устанавливается в значение both. Использование этого класса предотвращает обтекание следующего элемента вокруг плавающего элемента.

Как использовать float

Значения
  • left: Перемещает элемент влево, позволяя другим элементам обтекать его справа.
  • right: Перемещает элемент вправо, позволяя другим элементам обтекать его слева.
  • none: Значение по умолчанию, при котором элемент не перемещается.
  • inherit: Наследует значение свойства float от родительского элемента.
Свойство clear
  • При использовании float следующий элемент может обтекать плавающий элемент. Чтобы этого избежать, используется свойство clear. Значения свойства clear следующие:.
    • left: Избегает элементов, перемещённых влево.
    • right: Избегает элементов, плавающих справа.
    • both: Избегает элементов, плавающих как слева, так и справа.
    • none: Позволяет элементам обтекать. Это значение по умолчанию.

Примечания

  • При использовании float может возникнуть проблема, когда высота родительского элемента игнорирует высоту плавающего элемента. Чтобы избежать этого, используйте технику clearfix или overflow: hidden; для родительского элемента.
  • В адаптивном дизайне или сложных макетах float может быть труднее использовать по сравнению с flex или grid, поэтому рекомендуется использовать flex или grid.
Резюме

float — это старая техника для размещения элементов слева или справа, позволяющая обтекание текста или других элементов. Она иногда всё ещё используется для простых макетов или обтекания изображений. Однако для создания более гибких и простых макетов рекомендуется использовать flexbox или grid.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS свойства, связанные с пользовательским интерфейсомОбзор адаптивного дизайна в CSS