Плавающий макет CSS, подробное объяснение проблемы падения высоты, вызванной плавающим макетом.

Обязательно прочтите, если вам не нужны основы HTML: начать работу с HTML, программирование настолько просто.

1.Что такое плавающий режим

1.1 Определение

Плавающий: элемент отрывается от потока документа, а затем перемещается в указанном направлении (влево или вправо) и останавливается, когда сталкивается с краем родительского элемента или соседних плавающих элементов.

1.2 Примечание

После того, как элементу присвоен плавающий атрибут, он не влияет на элементы перед элементом, а влияет только на элементы позади него.

1.3 значение атрибута с плавающей запятой

• левый элемент перемещается влево;
• правый элемент плавает вправо
• none не имеет плавающего значения по умолчанию

2. Характеристики плавающего режима

2.1.Элементы можно располагать горизонтально и отображать в одну строку.

(Элементы перемещаются в заданном направлении и останавливаются при встрече с родительскими или соседними плавающими элементами. Если плавающими являются несколько элементов, они будут отображаться рядом)

2.2 Текст и плавающее пространство на одном уровне

(Текст может воспринимать плавающий атрибут, а текстовое содержимое можно обернуть вокруг плавающего элемента)

2.3. Плавающее пространство можно использовать для окружения графики и текста.

2.4 Если элемент установлен с плавающим атрибутом, элемент становится элементом с атрибутом inline-block.

(Поддерживает внутренние и внешние поля, но не поддерживает magrin:autoадаптивное центрирование; ширина и высота по умолчанию расширяются за счет содержимого, поддерживаются настройки атрибутов ширины и высоты)

2.5.Преимущества плавающих блоков по сравнению с инлайн-блоками:

Его также можно отображать горизонтально, но плавающее решает проблему промежутков между элементами и выравнивания базовой линии, а также позволяет выравнивать элементы по левому (правому) краю. Поэтому для горизонтального макета обычно рекомендуется использовать плавающие атрибуты.

Конкретный дисплей:

[1] Элементы перемещаются в заданном направлении и останавливаются при встрече с родительским или соседним плавающим элементом; если несколько элементов плавают, они будут отображаться рядом.

Вот обычные три элемента блока:

А. Установите плавающий атрибут слева для первого поля:.div1{float: left;}
рендеринг:

В этот момент мы обнаружили, что второй зеленый ящик отсутствует. На самом деле он не отсутствует, просто в поле 1 используется атрибут float, благодаря которому поле 1 перемещается влево в исходном положении. Поскольку левая сторона является его родительским элементом тела, оно перестает перемещаться влево, поэтому непосредственно в исходном положении. В этот раз второй зеленый прямоугольник был затронут, чтобы заполнить позицию исходного блока. То есть первый блок плавает поверх второго блока, поэтому мы не можем видеть коробка вторая. .

Б. В первом блоке плавающий атрибут не добавляется, но добавляется плавающий атрибут во второй блок:.div2{float: left;}
эффект таков:

поскольку в этот момент второй блок перемещается влево, что не влияет на первый блок. влево и встречает тело родительского уровня, поэтому оно перемещается в исходное положение второго блока. В этот момент затрагивается третий блок, и третий блок перемещается вверх, заполняя исходное положение второго блока. То есть в это время второй ящик плавает поверх третьего, поэтому третий ящик не виден.

в) Добавьте плавающие атрибуты во все три поля одновременно:

Рендеринг:

Блок 1 перемещается влево и останавливается при встрече с родительским телом. Когда блок 2 перемещается влево, он встречает блок 1, который также имеет плавающий атрибут, поэтому блок 2 останавливается после блока 1. Аналогично, блок 3 встречает то же самое. плавающий атрибут. Второе поле атрибутов также остановлено, поэтому эти три поля можно отображать рядом.

[2] Текст и плавающий элемент находятся на одном уровне
. Текст может воспринимать плавающий атрибут, а текстовое содержимое можно обернуть вокруг плавающего элемента.

Давайте сначала посмотрим на фрагмент кода,

 <style>
        .box1 {
      
      
            float: left;
            width: 300px;
            height: 300px;
            background: green;
        }
        .box2 {
      
      
            width: 300px;
            height: 300px;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="box1">我是盒子1</div>
    <div class="box2">我是盒子2</div>
</body>

Мы установили два блока одинакового размера. Если мы добавим поплавок слева к первому блоку, первый блок будет плавать поверх второго блока, а второй блок не будет виден.
Взгляните на рендеринг:

мы видим, что второй блок закрыт не полностью, и текст внутри него все еще виден. Это потому, что плавающий элемент и текст находятся на одном уровне. Текст кажется плавающим, поэтому текст не может подниматься вверх. Другими
словами: после того, как элементу присвоен плавающий атрибут, следующий элемент будет игнорировать существование этого элемента, но текстовое содержимое в следующем элементе все равно останется. Освободит место для этого элемента, чтобы его собственное текстовое содержимое могло оборачиваться вокруг плавающего элемента. Поэтому мы обычно используем его для переноса изображений и текста:

[3] Обтекание графикой и текстом: текстовое содержимое будет обтекать плавающий элемент, и вы можете выбрать направление перемещения.

[4] Если элемент установлен с плавающим атрибутом, элемент становится элементом с атрибутом inline-block:
поддерживаются внутренние и внешние поля, magrin:autoадаптивное центрирование не поддерживается); ширина и высота поддерживаются содержимым, и поддерживаются атрибуты ширины и высоты.
Давайте сначала посмотрим на рендеринг:

мы можем найти:

• Первоначально ширина элементов уровня блока по умолчанию была такой же, как и у родительского элемента, и не поддерживала отображение строк. Однако после использования плавающего атрибута ширина по умолчанию стала саморасширяющейся вместе с содержимым (конечно, вы также можете установить ее самостоятельно), а также может отображаться в одной строке.Это явно имеет характеристики элементов уровня блока;
• Изначально встроенные элементы не поддерживали настройки ширины и высоты, но после использования плавающего атрибута вы можете установить его самостоятельно, что, очевидно, имеет характеристики элементов уровня блока;
• Независимо от того, является ли это встроенным или блочным элементом, после использования плавающего атрибута поддерживаются внутренние и внешние поля, но margin:auto;не поддерживается адаптивное центрирование.

[5] Преимущества плавающего блока по сравнению со встроенными блоками:
ранее мы узнали, что использование встроенных блочных элементов позволяет отображать элементы рядом, но есть несколько проблем: после отображения строк между элементами остаются промежутки и базовая линия. проблема с выравниванием.
Использование плавающих элементов также позволяет отображать элементы рядом без этих проблем. Более того, плавающие элементы также можно выровнять по левому или правому краю, перемещая их влево и вправо. Очевидно, что встроенные блоки невозможны, поэтому, когда мы используем горизонтальную компоновку, часто выбираем больше плавающих элементов .

3. Проблема падения высоты

3.1 Что такое коллапс по высоте?

Когда родительский блок не задает высоту, дочерний блок имеет плавающий атрибут. Когда браузер вычисляет высоту блока, он не включает плавающий блок, в результате чего высота родительского блока сворачивается и влияет на макет.

<style>
        div{
      
      
            width: 1000px;
            background-color: pink;
            margin: auto;
        }
        .box1{
      
      
            width: 500px;
            height: 300px;
            background-color: green;
        }
        .box2{
      
      
            width: 300px;
            height: 350px;
            background-color: blue;
        }
        .box3{
      
      
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

Выше приведен розовый родительский блок. Если родительский элемент не задает высоту, по умолчанию он будет открыт на высоту трех дочерних блоков.
Давайте посмотрим на рендеринг:

Когда мы добавляем плавающие атрибуты к этим дочерним элементам, рендеринг выглядит следующим образом:

Мы обнаруживаем, что не видим розового прямоугольника. Это потому, что браузер не добавляет плавающие атрибуты при вычислении высоты Коробки включены в расчет, поэтому возникает явление обрушения, что очень некрасиво и влияет на планировку.

3.2 Методы решения проблемы коллапса, вызванного всплыванием:

1. Добавьте часто используемый элемент непосредственно к родительскому элементу
. 2. Добавьте переполнение: скрыто к родительскому элементу, вызывая эффект bfc.

• Скрыть переполнение. Когда содержимое превышает родительский элемент, вы можете использовать этот атрибут и значение, чтобы обрезать часть переполнения, чтобы сделать страницу более красивой.
• Очистите поплавок. Когда дочерний элемент плавает, добавьте overflow:hidden к родительскому элементу. Согласно его первой особенности, лишняя часть дочернего элемента должна быть отрезана. Однако, поскольку дочерний элемент является плавающим, его нельзя обрезать. .Все может быть обрезано только родительским элементом.Элемент увеличивает свою высоту, чтобы обернуть дочерний элемент, так что родительский элемент имеет высоту, и эта высота является адаптивной высотой, следующей за дочерним элементом, так что плавающий дочерний элемент включен в родительский элемент.

3. В этом родительском поле создайте в конце новый пустой элемент div и добавьте к этому элементу атрибут Clear. Установка clear：both；этого параметра, несомненно, приведет к добавлению бессмысленных тегов. Нехорошо иметь слишком много таких тегов на большой странице.

ясный атрибут:

• Значение атрибута: одновременно очищает левые и правые плавающие элементы.
• слева ясно слева с плавающей запятой
• right очищает правое число с плавающей запятой

4. Очистить числа с плавающей запятой через псевдокласс::after

Использование псевдоклассов для очистки чисел с плавающей запятой имеет тот же эффект, что и создание пустого элемента div и установка для него значения Clear: оба; за исключением того, что псевдоклассы используются вместо пустых элементов div.

• content: ''; Необходимо прописать ключ для открытия псевдоэлемента
• display:block; псевдоэлемент — это встроенный элемент, который становится атрибутом уровня блока.
• очистить: оба; Очистить плавающие свойства
  Полная демонстрация:

<style>
        div {
      
      
            /* 方法一：給父级设置一个高度 */
            /* height: 500px; */
            width: 1000px;
            background-color: pink;
            margin: auto;
            /* 方法二：在父元素里添加溢出隐藏属性overflow */
            /* overflow: hidden; */

        }

        .box1 {
      
      
            float: left;
            width: 500px;
            height: 300px;
            background-color: green;
        }

        .box2 {
      
      
            float: left;
            width: 300px;
            height: 350px;
            background-color: blue;
        }

        .box3 {
      
      
            float: right;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /* 方法三：在这个父级盒子里面，末尾专门新建一个空的div，并设置一个clear清除属性
        属性值：both 同时清除左右浮动
                left  清除左浮动
                right  清除右浮动
        */
        /* .clear{
            clear: both;
        } */


        /* 方法四;通过伪类::after清除浮动 
          /* 开启伪元素的 钥匙 key  必需写 */
        /* content: ''; */
        /* 伪元素是行内元素   变为块级属性 */
        /* display: block; */
        /* 清除浮动属性 */
        /* clear: both; */
        /* .wrap::after{
          content: '';
          display: block;
          clear: both;
        } */
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <!-- 专门新建一个空的div，为这个div添加一个clear清除属性 -->
        <div class="clear"></div>
    </div>
</body>

Подведем итог

Вышеупомянутый плавающий макет, составленный редактором для всех.Преимущества использования плавающего макета при горизонтальном макете, а также распространенные проблемы с коллапсом по высоте и решения, вызванные плавающим макетом, представлены и объединены с соответствующими случаями для более подробного объяснения. Составлено со ссылкой на различные источники и на мое собственное понимание.Если могут быть неточности и упущения,надеюсь вы меня просветите и внесете исправления.Заранее благодарю.