Краткий анализ использования HTML -приостановленного плавания

Автор：Eve Cole Время обновления：2025-04-25 21:16:01

Некоторое использование плавания

Левая подвеска: float:left;

Правая подвеска: float:right;

Использование плавания

Использование плавания довольно широкое. Здесь я кратко представляю общие использование в коллекции:

Прежде чем я вступлю в поплавок, я установлю несколько встроенных свойств. Атрибуты блока объединяются с инкрустацией Div для завершения макета страницы. Затем я попадаю в плавающий атрибут, что значительно облегчает плавание. Нет никакого различия между элементами уровня блока, встроенными элементами или встроенными блоками в плавании. Поплавок также будет автоматически вводить как размер изменений ширины родительского элемента, например. Прямо отрегулируйте окно просмотра и впишите элементы в следующую строку.
Кроме того, что касается оптимизации SEO, о которой я только что узнал, анализ браузера находится сверху вниз. Следовательно, важный контент часто писывается спереди, и некоторые неважные или рекламные объявления написаны сзади. Тем не менее, я хочу, чтобы пользователи обращали внимание на рекламу. Поэтому основной контент расположен в центре, а реклама приостановлена влево и вправо. Я считаю, что друзья, которые часто просматривают веб -страницы, также заметили этот момент. Давайте поговорим о некоторых письмах и последствиях подвески. Давайте поговорим о некоторых письмах и последствиях подвески.

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

Итак, вернемся к точке,

Первый феномен Float = inline Block

Подвеска будет стилем 4 блоков, становясь встроенным режимом блока: как показано на рисунке ниже

 <style> div {ширина: 200px; Высота: 200px; фоновый цвет: розовый; Граница: 1px твердый черный; Плавание: осталось; } </style>

 <body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>

Второе явление:

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

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

 <style>. Первый один {float: left; фоновый цвет: зеленый; }. Сторонний-один {фоновый цвет: фиолетовый; } .Third-one {foangy-color: Blue; } .fourth-one {float: left; фоновый цвет: серый; } div {ширина: 200px; Высота: 200px; фоновый цвет: розовый; Граница: 1px твердый черный; размер шрифта: 30px; } </style>

 <body> <div class = first-one> </div> <div class = second-one> </div> <div class = third-one> </div> <div class = четвертый-один> </div> <div class = четвертый-один> </div> </body>

Третье явление:

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

Эта статья воспроизведена из: https://segmentfault.com/a/1190000022669455

Суммировать

Это конец этой статьи о кратком анализе использования HTML Floating Float. Для получения более связанного содержимого HTML Floating Float, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!