Контексти форматування блоків
Плаваючі елементи, абсолютно розташовані елементи, контейнери блоків (наприклад, вбудовані блоки, комірки таблиці та підписи таблиць), які не є блоками, та блоки з "переповненням", відмінним від "видимого" (за винятком випадків, коли це значення розповсюджене до області перегляду) встановлюють нові контексти форматування блоків для їх вмісту.
З моїм напівжирним шрифтом, це важливий біт встановлення
Це означає, що елемент, який ви використовуєте overflow(що-небудь, крім видимого) або floator inline-block..etc on, відповідає за макет своїх дочірніх елементів. Потім дочірні елементи "містяться", незалежно від того, чи це плаваючі або згортаються поля, вони повинні повністю містити їх обмежуючий батько.
У контексті форматування блоків лівий зовнішній край кожного вікна торкається лівого краю вміщуваного блоку (для форматування справа наліво торкаються правої кромки)
Що означає наведений вище рядок:
Оскільки коробка може бути лише прямокутної та не неправильної форми, це означає, що новий контекст форматування блоку між двома поплавцями (або навіть поруч з одним) не буде обертатися навколо сусідніх поплавців. Внутрішні, дочірні скриньки можуть поширюватися лише настільки, що торкаються батьків ліворуч (або праворуч у RTL). Саме така поведінка корисна для макетів у колончастому стилі. Однак основне його використання полягає у зупинці плаваючих значень, скажімо, у div "main content", фактично очищаючи плаваючі бічні стовпці, тобто плаваючі, які з'являються раніше у вихідному коді.
Очищення поплавця
За звичайних обставин флоати повинні очищати всі попередні плаваючі елементи, які раніше розміщувались у цілому вихідному коді, а не лише у вашій відображуваній "колонці".
Ця властивість вказує, які сторони вікна (елементів) елемента можуть не знаходитись поруч із попереднім плаваючим вікном. Властивість 'clear' не враховує плаваючі функції всередині самого елемента або в інших контекстах форматування блоків
Отже, скажімо, у вас є макет із трьома стовпцями, де лівий та правий стовпці плаваються відповідно ліворуч та праворуч, бокові стовпці тепер знаходяться в нових контекстах форматування блоків, оскільки вони плаваючі (пам’ятайте, плаваюча є також однією з властивостей, яка встановлює новий BFC ), так що ви можете з радістю розміщувати елементи списку всередині них, і вони очищають лише поплавці, які вже знаходяться всередині бічних стовпців, про які вони вже не дбають про поплавці раніше у вихідному коді
Зробити основним вмістом новий контекст форматування блоків чи ні?
Тепер, коли середній стовпець, ви можете просто розмістити його з обох сторін, щоб він акуратно сидів між двома стовпчиками, що плавають, і взяв решту ширини - звичайний спосіб отримати бажану ширину, якщо центральна колонка є "текучою" - що буде будьте добре, доки вам не потрібно буде використовувати плаваючі символи / кліренси всередині div вмісту (загальне явище для тих, хто використовує хакери чи шаблони "clearfix", включаючи їх)
Візьміть цей дуже простий код:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated">this a floated box</div>
</div>
Він видає наступне:
Загалом це нормально, особливо якщо у вас немає кольорів тла або внутрішніх (в основному вмісті) плаваючих - зауважте, що плаваючі чудові (ще не очищені), вони роблять, мабуть, те, що ви, крім них, але вони, H3топ margin та pнижнє поле в дійсності насправді не містяться у div вмісту (світло-сірий фон).
Отже, до того самого простого маргінального сценарію вищевказаного коду додайте:
.clear-r {clear: right;}
на CSS і змініть другий плаваючий блок HTML на:
<div class="floated clear-r"> this a floated cleared box</div>
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
Цього разу ви отримуєте таке:
Другий поплавок очищає праву сторону, але очищає всю висоту правої колони. Правий стовпець розміщений раніше у вихідному коді, тому це очищається, як сказано! Можливо, це не бажаний ефект, але також зауважте, що поля h3та pполя все ще згорнуті (не містяться).
Зробіть так, щоб він створив контекст форматування блоків заради дітей!
і нарешті змусьте головну колонку вмісту взяти на себе відповідальність - станьте контекстом форматування блоків - за її вміст: видаліть margin: 0 200px;із основного вмісту CSS та ADD, overflow: hidden; і ви отримаєте це:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
overflow: hidden;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
Це, мабуть, набагато більше схоже на те, що ви очікували б зробити, зауважте, тепер поплавці містяться, вони очищаються належним чином, ігноруючи правий бічний стовпець, а також поля h3і pполя містяться замість згортання.
Завдяки широкому використанню скидів сьогодні поля є менш помітними (і IE все ще не зовсім їх розуміє), однак те, що щойно сталося з "основним вмістом" центру, це те, що він став контекстом форматування блоків і тепер відповідає за його власні дочірні (нащадкові) елементи. Це насправді дуже схоже на уявлення Microsoft про раннє існування hasLayout, воно використовує ті самі властивості display: inline-block, floatі overflowбудь-що інше, ніж видиме, і, звичайно, комірки таблиці завжди мають макет .. однак без помилок;)
Сподіваюся, це трохи допоможе, будь-які питання сміливо задавайте!
Оновлення: додаткова інформація, про яку йдеться:
Коли ви говорите "але плаваючі елементи ігноруються, коли користувальницький агент малює вікно та враховує їх, коли вони заповнюють вміст."
Так, поплавці зазвичай накладають свої контейнерні ящики, чи це ви маєте на увазі про батьківські межі? Коли блок-елемент намальований і він містить плаваючий, сам батьківський блок малюється у вигляді прямокутника під поплавцем, і це "вбудовані анонімні поля" або просто "рядкові рядки" інших дочірніх елементів, які скорочуються, щоб звільнити місце для поплавок
Візьміть цей код:
#content {
background: #eee;
color #000;
border: 3px solid #444;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
p {
background: #444;
color: #fff;
}
<div id="content">
<div class="float">floated box</div>
<h3>This is a content box</h3>
<p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>
Що виробляє це:
Ви бачите, що батьківський елемент насправді не містить float, оскільки він не обертає його повністю .. float просто плаває поверх вмісту - якби ви продовжували додавати вміст до div, він з часом обернувся б під поплавком, оскільки не було б потреби в (анонімних) "рядках" pелемента більше скорочувати себе.
Я забарвив елемент абзацу, щоб ви могли бачити, що він теж насправді потрапляє під поплавок, темно-сірий фон - там, де починається абзац, білий текст - там, де починається "поле анонімного рядка" - це лише вони, які "звільняють місце" "для float, якщо ви не вкажете інше (тобто не зміните контекст)
Знову ж таки, посилаючись на наведене вище зображення, якщо ви хочете зробити поле лівою стороною pелемента, так, це зупинить обтікання тексту під нижньою частиною поплавця, оскільки "рядки рядків" (білий текст) торкнуться лише лівого краю їх контейнер, і ви виведете кольоровий фон pправоруч, за межами поплавця, але ви не змінили поведінку pконтексту форматування. Як центральна колонка на першому зображенні вище;)