напиши первым
Обычно заходите в Google Translate, чтобы увидеть объяснение float:
she relaxed, floating gently in the water
В одно мгновение богиня плавно плавала в воде. Хэппи шлепает по воде, вау. . .
Не думайте об этом, мир того не стоит, давайте перейдем к делу, на чудесной картинке выше мы видим, что богиня по-прежнему занимает пространство воды, и богиня плывет. Так что давай, ладно, я больше не могу писать, давайте сразу вопрос начнем. . .
Я думаю, что многие люди дажеfloatЯ не знаю, что такое сознание, но мы должны знать, что принципы многих характеристик тесно связаны со словами или буквами, которыми они названы, а не названы случайно. Из названия вы можете увидеть некоторые из первоначальных замыслов оригинального дизайна.
Выявление проблемы — ключ к успеху
Задайте себе три вопроса:
第一 浮动会造成什么影响？
第二，如何解决这些因为浮动而造成的影响？
第三，bfc原理？
На самом деле, я лично понимаю, что основная проблема, вызванная флоатингом, состоит в том, чтобы разрушить поток документов, тогда возникает проблема,floatНарушен документооборот, зачем так проектироватьapi, я проверил некоторую информацию и, наконец, выяснил, это потому, что оригинальный дизайнfloatЦель состоит в том, чтобы реализовать функцию набора текста, с помощью которой текст может обтекать изображение, и это то, о чем мы иногда задумываемся:После установки поплавка он все равно будет сжимать текстовое содержимое в контейнере.
Например, посмотрите на следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float实现浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
float: left;
text-align: center;
line-height: 200px;
background: skyblue;
}
.fu {
width: 400px;
}
</style>
<body>
<div class="fu clearfix">
<div class="z1">设置了float为left的图片</div>
<div class="z2">你看，我没有被浮动哥哥挡住哦，这是一段神奇旅行，一天我遇上了白雪公主</div>
</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
Видя это, это хоть как-то понятно? Как видно из приведенного выше рисунка, даже если изображение плавает, вне нормального потока документа, оно также перекрывает элементы, которые не плавают, но не перекрывает текстовое содержимое, что также подтверждает, чтоfloatэтоapiсуществуетВо-первыхОсновная цель разрабатываемого: реализовать функцию обтекания текста набором картинок.
Размышляя об этом, я вдруг понял, как выглядят другие шаблоны компоновки, и начал экспериментировать. удалить контейнерz1изfloatсвойства, добавленоpositionсвойства, код выглядит следующим образом
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute实现浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
position: absolute;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.8;
}
.fu {
width: 400px;
}
</style>
<body>
<div class="fu clearfix">
<div class="z1">设置了positon为absolute的图片</div>
<div class="z2">你看，我被absolute哥哥挡住哦，这是一段神奇旅行，一天我遇上了白雪公主</div>
</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
Мы видим эту настройкуabsoluteКонтейнер в том смысле, что он полностью выходит за рамки обычного документооборота. Перекрывает весь контейнер и текстовое содержимое в текущей позиции. Сопоставив и подумав об этом, вы обнаружите, что это еще раз доказываетfloatОсновная цель, для которой он был разработан. Если это можно так понять, я думаю, какие методы следует использовать для очистки разных бизнесовfloat, или что использовать вместоfloat, будет очень четкое направление.
На самом деле, вы обнаружите, чтоabsoluteиfloatОни не будут покрывать обычный поток документов перед ними. Это должно быть связано с механизмом рендеринга браузера. Контент будет рендериться сверху вниз. После успешного рендеринга он не будет покрываться последующими плавающими элементами. (Не рассмотрим случай принудительного переопределения с помощью fix и т. д.).
Простой код выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器，背景为黄色</div>
<div class="z3">没有设置任何浮动的容器，背景为红色</div>
<div class="z1">设置了浮动的元素，opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器，背景为绿色</div>
<div class="z5">没有设置任何浮动的容器，背景为粉色</div>
</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
Из аннотаций и описаний на рисунке мы можем ясно знать, что,floatЭто не повлияет на документ, который был визуализирован ранее, но повлияет на документ, который будет визуализирован после него. Итак, вопрос в том, как мы можем устранитьz1плавающийz4,z5Каково влияние?
Сначала нам нужно знать,z1Каковы эффекты этого поплавка?Эффекты следующие:
Первое воздействие: пострадал
z4,z5Макет.
Второй эффект: влияет на высоту родительского контейнера Высота обычного родительского элемента является адаптивной, а высота представляет собой общую высоту содержимого, которое он содержит, а плавание внутреннего элемента приводит к тому, что высота родительского контейнера крах.
Третий эффект: высота родительского контейнера свернута, что повлияет на макет документа на том же уровне, что и родительский элемент.
Следующий код прекрасно иллюстрирует эти эффекты:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
/* overflow: hidden; */
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器, 背景为黄色</div>
<div class="z3">没有设置任何浮动的容器, 背景为红色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器, 背景为绿色</div>
<div class="z5">没有设置任何浮动的容器, 背景为粉色</div>
</div>
<div class="z6">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
<div class="z7">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
Решения важны
Устранение этих трех последствий требует мышления в двух направлениях:
Первое направление: решить влияние родительского элемента на его родственные элементы, я предпочитаю решатьвнешнее противоречие.
Второе направление: решить влияние плавающих элементов внутри родительского элемента на его родственные элементы, я предпочитаю решатьвнутренний конфликт.
Как говорится, семейное уродство не может быть обнародовано. Итак, давайте сначала решим внешнее противоречие. Как его решить? Идея его решения не что иное, как сделать так, чтобы высота родительского элемента больше не разрушалась, а учитывать высоту плавающего элемента. Помните ключевой момент, в это время внутренние противоречия все еще существуют. Например, плавающий элемент имеет высокую степень перекрытия со своими последующими одноуровневыми элементами.
разрешать внешние конфликты
триггер bfc
Первый — вызватьbfc, почему, потому что триггерbfc, высота будет включать высоту плавающего элемента. Как его вызвать, вы можете установить родительский элементoverflow:auto;для других триггеровbfcЯ не буду говорить о методе, я в основном говорю о принципе. код показывает, как показано ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
overflow: hidden;
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器, 背景为黄色</div>
<div class="z3">没有设置任何浮动的容器, 背景为红色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器, 背景为绿色</div>
<div class="z5">没有设置任何浮动的容器, 背景为粉色</div>
</div>
<div class="z6">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
<div class="z7">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
четкий принцип
Добавьте псевдоэлемент к родительскому элементу: код выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
/* clear: left */
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
}
.clearfix:after {
display: block;
overflow: hidden;
content: '伪元素的内容哦';
clear: both;
height: 0;
background: slateblue;
}
</style>
<body>
<div class="fu clearfix">
<div class="z2">没有设置任何浮动的容器, 背景为黄色</div>
<div class="z3">没有设置任何浮动的容器, 背景为红色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器, 背景为绿色</div>
<div class="z5">没有设置任何浮动的容器, 背景为粉色</div>
</div>
<div class="z6">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
<div class="z7">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
</body>
</html>
Многие люди не знают, каков принцип очистки float псевдоэлементами, и почему добавление этого псевдоэлемента к родительскому элементу может очистить float родительского элемента. Здесь я намеренно использую псевдоэлементыcontentНаписал немного текста и добавил фоновый цвет, немного похожий на гейский. . .
Хорошо, давайте сначала посмотрим на общий рендеринг:
display:block, перейдите к следующему снимку экрана.
heightДля установки на 0. еслиcontentне является пустой строкой, то содержимое будет отображаться на странице. Но на самом деле при очистке поплавкаcontentзаписываются как пустые строки, еслиcontentОн установлен только на''пустой символ, тоheightтакже могут быть опущены, в том числеoverflowМожно и не писать, писатьheightиoverflowВсе для надежности кода. Но есть один очень важныйcontentЭтот атрибут должен быть записан, а не записанcontent, нет никакого способа очистить поплавок.
Приближаются самые важные очки знаний, смотрите два скриншота:
contentотображается, вы найдетеОсновной принцип очистки и плавания псевдоэлемента заключается в добавлении контейнера блочного уровня к родительскому элементу и одновременной установке контейнера блочного уровня.clearсвойство, чтобы он мог очистить свой собственный float, чтобы он располагался под плавающим элементом, как обычно в расположении контейнера на уровне блока. В то же время родственные элементы родительского элемента также обычно располагаются за элементом уровня блока, образованным псевдоэлементом, и не будут затронуты плавающим положением.
Следующее, чтобы убитьclearСкриншот после свойств:
Добавьте дочерний контейнер уровня блока к родительскому элементу, конечно, это последний дочерний контейнер уровня блока родительского элемента. В то же время установите свойство clear для подконтейнера уровня блока, чтобы очистить его плавающий элемент, чтобы подконтейнер можно было расположить за плавающим элементом, а также поддерживать высоту родительского элемента. Тогда родственные элементы родительского элемента также могут быть расположены нормально. Таким образом, этот подконтейнер не может иметь высоту и содержимое, иначе это повлияет на макет родительского элемента.
На данный момент решения внешних конфликтов и их соответствующие принципы были четко сформулированы. Так как же разрешить внутренние конфликты?
По сути, принцип решения внутренних противоречий такой же, как и у второго метода решения внешних противоречий: при очистке плавания первого элемента, затронутого плаванием, последующие элементы не будут затронуты плаванием. код показывает, как показано ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
clear:both;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器, 背景为黄色</div>
<div class="z3">没有设置任何浮动的容器, 背景为红色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器, 背景为绿色</div>
<div class="z5">没有设置任何浮动的容器, 背景为粉色</div>
</div>
<div class="z6">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
<div class="z7">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
</body>
</html>
Схема эффекта выглядит следующим образом:
установить внутренний элементclear:both;После очистки флота внутренние конфликты и внешние конфликты разрешаются напрямую. Некоторые люди могут подумать, что если за контейнером z4 находится плавающий элемент, я не хочу объяснять это здесь, потому что принцип может быть получен рекурсивно тот же, но давайте проанализируем последний код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除float浮动</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
clear:both;
}
.z5 {
background: pink;
/* clear:both */
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
overflow: auto;
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器, 背景为黄色</div>
<div class="z3">没有设置任何浮动的容器, 背景为红色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器, 背景为绿色</div>
<div class="z1">设置了浮动的元素, opacity为0.5</div>
<div class="z5">没有设置任何浮动的容器, 背景为粉色</div>
</div>
<div class="z6">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
<div class="z7">和父级元素同级的容器, 没有设置任何浮动, 背景为绿色</div>
</body>
</html>
Вот несколько скриншотов эффекта:
Родительский элемент не очищает поплавок, существуют внешние противоречия и внутренние противоречия
Родительский элемент использует bfc для очистки поплавка, внешнее противоречие разрешено, а внутреннее противоречие все еще существует.
Установив очистку для первого элемента блочного уровня того же уровня после плавающего элемента в родительском элементе, чтобы очистить поплавок, внутреннее противоречие разрешается, а также разрешается внешнее противоречие.
заclearиleftиright, не говоря уже об этом,apiвещи, нормальныеbothВот и все. Это сочинение почти закончено. Наконец, резюмируя:
Разным предприятиям могут потребоваться разные методы очистки резервов.Независимо от того, какой метод вы выберете, вы не сможете избежать внешних и внутренних конфликтов.Вашему бизнесу необходимо сохранять внутренние конфликты, разрешать только внешние конфликты или разрешать как внешние, так и внутренние конфликты. Они должны быть решены в соответствии с характеристиками бизнеса. Во-вторых, следует ли использовать bfc, clear или псевдоэлемент, и какой метод использовать для запуска, если используется bfc. Это также зависит от особенностей бизнеса.
Симпатичное заявление в конце статьи: Если вы делаете репост или цитату, пожалуйста, вставьте исходную ссылку и уважайте проделанную работу, не ложась спать допоздна😂. В статье могут быть ошибки, комментарии приветствуются, обсуждения также приветствуются. Статья может быть написана недостаточно хорошо, пожалуйста, потерпите меня. Что касается фронтенда, у меня тоже разбито сердце, жизнь слишком коротка, я изучаю фронтенд, вношу немного больше и становлюсь немного счастливее~