67239

Плаваючі елементи та очищення

Лекция

Информатика, кибернетика и программирование

У цій темі ми познайомимося з плаваючими елементами (float) і очищенням (clearing) – двома обов’язковими інструментами сучасного Web-дизайнера. Вони є багатогранними інструментами, які можна використовувати для реалізації обтікання текстом зображень і навіть створення багатостовпцевих компонувань.

Украинкский

2014-09-06

346 KB

0 чел.

Тема № 9: «Плаваючі елементи та очищення»

ЗМІСТ

Вступ

Для чого потрібні плаваючі елементи й очищення?

Трохи теорії

Як працюють плаваючі елементи? 

Деталі

Додаткові плаваючі елементи

Поля плаваючих елементів

Очищення

Контейнерні плаваючі елементи

Укладання в оболонку

Центрування плаваючих елементів

Помилки!

Резюме

Контрольні запитання


Вступ

У цій темі ми познайомимося з плаваючими елементами (float) і очищенням (clearing) – двома обов’язковими інструментами сучасного Web-дизайнера. Вони є багатогранними інструментами, які можна використовувати для реалізації обтікання текстом зображень і навіть створення багатостовпцевих компонувань.

  1.  Для чого потрібні плаваючі елементи й очищення?

Якщо подивитися на звичайний журнал, то ви побачите статті, які ілюструють зображення й оточуючий їх текст. Властивість float в CSS було створено з метою реалізувати на Web-сторінках такий стиль компонування.

Плаваюче зображення – або фактично будь-який інший елемент – зміщується до однієї сторони і дозволяє тексту обтікати його з іншого боку. Очищення плаваючого елементу означає зміщення його вниз, у разі необхідності, щоб перешкодити його появи поряд з плаваючим елементом.

Хоча властивість float призначено для використання з будь-якими елементами, дизайнери найчастіше використовують її для отримання багатостовпцевих компонувань без використання розмітки таблиці.

  1.  Трохи теорії

Щоб пояснити, як працює float, необхідно подивитися, як браузери Web відтворюють документ HTML/CSS. Не турбуйтеся, це буде коротко.

Кожен видимий елемент HTML генерує бокс, який потім відтворюється. Якщо ви переглядаєте документ на екрані комп’ютера або мобільного телефону, бокси відтворюються на екрані. Під час друку документа бокси відтворюються на папері. Якщо використовується зчитувач екрану, вміст боксу відтворюється вголос, як мова.

Так само як в HTML є елементи блочного і строкового рівнів, в CSS є бокси блочного і строкового рівнів. За замовчуванням елементи блочного рівня генерують бокси блокового рівня, а рядкові елементи генерують рядкові бокси. Крім боксів, що генеруються елементами, будуть також генеруватися додаткові бокси, наприклад, для текстового контенту документа. Блокові бокси зазвичай розташовуються в тому порядку, в якому елементи з’являються в розмітці, зверху вниз. Блокові бокси не можуть з’являтися поруч пліч-о-пліч, якщо не використовується деякий код CSS. Строкові бокси розташовуються горизонтально. Властивість direction визначає, чи будуть вони розташовуватися зліва направо або справа наліво (за замовчуванням використовується зліва направо, якщо воно не визначено).

Це називається потоком документа: рядкові бокси течуть горизонтально в боксах своїх блоків предків, а бокси блоків течуть вертикально. Бокси з’являються в тому ж порядку, що і елементи в розмітці HTML.

Розглянемо наступний простий документ HTML:

<p>This is a very simple document. </p>

<p>It consists of <em>two</em> paragraphs. </p>

Мал.1 показує знімок з екрану цього документа з додатковою графікою, яка показує два блочних бокси, які згенеровані елементами p і строковим боксом, що згенерований елементом em.

Мал.1. Два блочних бокси, які згенеровані елементами p і строковим боксом, що згенерований елементом em.

Всі рядкові бокси, які складають один “рядок” на пристрої виведення, полягають в уявні прямокутники, звані лінійними боксами. Лінійні бокси завжди розміщуються зверху вниз без інтервалу між ними, як показано на мал.2.

Мал.2. Кожен відтворений рядок укладається в окремий лінійний бокс

  1.  Як працюють плаваючі елементи?

Тепер, познайомившись з основами теорії, давайте перейдемо до розгляду синтаксису плаваючих елементів і очищення, і розглянемо кілька прикладів.

Властивість float має чотири допустимих значення: left, right, none й inherit. Перші два використовуються значно частіше і будуть змушувати бокс зміщатися вліво або вправо. Оголошення float: none, яке використовується за замовчуванням, зазвичай оголошується тільки для “скасування” оголошення в деякому іншому правилі. float: inherit використовується дуже рідко й існує скоріше просто для одноманітності. Воно змушує елемент успадковувати значення float від елемента предка.

Плаваючий бокс виключається з потоку документа і зміщується якомога далі вліво або вправо, в залежності від зазначеного напрямку зсуву. “Як можна далі” зазвичай означає, поки зовнішній край плаваючого елементу не торкнеться краю блоку, що містить його (внутрішнього краю його заповнення, якщо є). Таким чином, для float: left бокс зміщується вліво, поки ліве поле плаваючого елементу не торкнеться лівого краю предка.

Уважний читач міг помітити, що вище було сказано “звичайно”. Якщо вже є бокс, зміщений вліво, коли ми зміщуємо інший бокс в тому ж напрямку, то другий бокс зупиниться, коли торкнеться першого боксу. Іншими словами, плаваючі елементи не накладаються один на одного.

Настав час подивитися на плаваючі елементи в дії, тому приготуйте текстовий редактор.

  1.  Створіть новий файл, скопіюйте в нього наведений нижче код, і збережіть документ як float.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title>Floating</title>

</head>

<body>

<p id="p1" > <span id="span-a" >Lorem ipsum</span>

<span id="span-b" >dolor sit amet</span>

<span id="span-c" >consectetuer</span> adipiscing elit. Curabitur feugiat feugiat purus. Aenean eu metus. Nulla facilisi. Pellentesque quis justo vel massa suscipit sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem. Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui. Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus. Duis quis orci quis nisl nonummy dapibus. Etiam ante. Phasellus imperdiet arcu at odio. In hac habitasse platea dictumst. Aenean metus. Quisque a nibh. Morbi mattis ullamcorper ipsum. Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna. Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu. Proin lectus purus, vehicula et, cursus ut, nonummy et, diam. </p>

<p id="p2" >Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa. Curabitur at lectus egestas quam interdum mollis. Cras id velit a lacus sollicitudin faucibus. Proin at ante id nisi porttitor scelerisque. In metus. Aenean nonummy semper enim. Aenean tristique neque quis arcu tincidunt auctor. Fusce consequat auctor ligula. Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros. In nisi augue, aliquam eget, convallis vel, malesuada quis, libero. </p>

<p id="p3" >Hello, World! </p>

</body>

</html>

Файл містить багато контенту, але він нам знадобиться, щоб показати, як все працює.

  1.  Відкрийте документ у Web-браузері, щоб побачити, як він виглядає. Нуднувато, чи не так?
  2.  Створіть інший документ в текстовому редакторі, введіть у нього представлений нижче код, і збережіть як style.css в тому ж каталозі, що і файл HTML кроку 1.

#span-a {

float: left;

background-color: #cfc;

color: #030;

}

  1.  З’єднайте таблицю стилів з документом HTML, вставляючи наступний рядок відразу перед тегом </head>:

<link rel="stylesheet" type="text/css" href="style.css" >

  1.  Збережіть і обновіть сторінку в браузері. Ви побачите тепер елемент span, що містить слова “Lorem ipsum”, зміщений вліво.
  2.  Як і раніше, не так просто побачити, що тут відбувається, тому давайте зробимо плаваючий елемент трохи більше. Додайте наступне оголошення в таблицю стилів:

#span-a {

float: left;

background-color: #cfc;

color: #030;

padding: 1em;

}

  1.  Збережіть і обновіть сторінку, і ви побачите, що зелена область стала тепер більше, так як ми додали невелике заповнення на всіх чотирьох сторонах боксу. Плаваючий елемент займає у висоту три рядки тексту і можна ясно бачити, що інший текст обтікає плаваючий елемент.

Деталі

Тепер ми розглянемо, що тут відбувається більш докладно. Плаваючий бокс, згенерований першим елементом span, був зміщений вліво, до самого краю документа, а лінійні бокси, суміжні з ним, були вкорочені. Хоча це не зовсім ще видно, але блочний бокс, згенерований параграфом, який містить плаваючий елемент, не торкнуться. Давайте виділимо параграф, щоб зробити це більш помітним.

  1.  Додайте ще одне правило CSS в таблицю стилів наступним чином:

p {

border: 1px solid #f00;

}

  1.  Знову збережіть файл CSS і поновіть сторінку браузера. Ви повинні тепер побачити червону межу навколо кожного параграфа – зверніть увагу, що плаваючий елемент розташований всередині одного з параграфів.
  2.  Давайте модифікуємо останнє правило, щоб перевірити, що плаваючі елементи зупиняються на внутрішньому краї області заповнення предка:

p {

border: 1px solid #f00;

padding: 1em;

background-color: #ff9;

}

  1.  Збережіть і поновіть, і ви побачите доказ того, що було сказано раніше: плаваючий бокс зміщується до краю блоку, що містить його, в той час як заповнення предка знаходиться поза ним. Ви побачите також, що жовтий фон параграфа розповсюджується під плаваючим боксом. Плаваючий бокс очевидно не впливає на бокс параграфа, тільки на лінійні бокси всередині.
  2.  Давайте поекспериментуємо ще – що відбудеться, якщо плаваючий елемент буде вище ніж його предок? Модифікуємо правило для плаваючого елементу наступним чином:

#span-a{

float: left;

background-color: #cfc;

color: #030;

padding: 1em 1em 10em;

}

Примітка: Якщо ви використовуєте більш вузьке вікно браузера, то може знадобитися використовувати для нижнього заповнення значення більше 10em, щоб зелена область поширилася за межі нижньої межі параграфа.

Тепер ви бачите щось цікаве: плаваючий бокс висовується назовні з блоку предка; бокс предок не розширюється, щоб охопити свій плаваючий бокс нащадок. Можна також бачити (якщо використовується досить велике нижнє заповнення), що лінійні бокси, суміжні з плаваючим елементом у другому параграфі, коротшають.

Додаткові плаваючі елементи

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

  1.  Додайте нове правило в таблицю стилів, збережіть і поновіть сторінку як і раніше:

#span-b{

float: left;

background-color: #ccf;

color: #003;

padding: 1em;

}

Тепер елемент span, що містить слова “dolor sit amet”, також зміщується вліво. Ви побачите, що він зміщується вліво, поки не торкнеться першого плаваючого елементу; іншими словами, “наскільки можливо “.

  1.  Навіщо зупинятися на двох плаваючих елементах? Давайте зробимо третій – додамо наступне правило в таблицю стилів:

#span-c{

float: left;

background-color: #fcc;

color: #300;

padding:2em 1em;

}

  1.  Я хочу також, щоб ви додали тимчасове правило, щоб побачити на прикладі, що відбувається, коли в рядку недостатньо місця для плаваючого елементу. Додайте наступне правило в кінці таблиці стилів:

span {

width: 34%;

}

  1.  Як і раніше, збережіть таблицю стилів й поновіть документ у браузері – ви побачите щось схоже на виведення, показане на мал.3.

Мал.3. Не зовсім те, чого очікували?

Ну! Що ж сталося? Третій плаваючий елемент тепер виявився нижче другого! (А браузер Internet Explorer 6 робить іншу дивну річ, яку ми поки проігноруємо.) Так як ширина кожного елемента span становить 34% від ширини параграфа (як визначено правилом, доданим на кроці 3), плюс деяке заповнення, то простору для всіх трьох в рядку не вистачає (3 x 34% = 102%). Два перші плаваючі елемента перебувають на одній лінії, але для третього місця не вистачає, і він зсувається вниз. Важливо те, що він зсувається вниз тільки настільки, щоб поміститися в рядку. Він не зрушується вниз нижче високого першого плаваючого елементу, так як праворуч від нього є простір.

Тут можна відзначити ще один цікавий момент, що ми присвоїли ширину елементам span. Це не повинно створювати жодних відмінностей, так як span є елементом строкового типу. Проте плаваючий бокс автоматично робиться боксом блокового рівня, тобто йому можна присвоювати розміри і вертикальні поля.


Поля плаваючих елементів

Тепер подивимося, що можна робити з полями плаваючих елементів.

  1.  Перш за все, видаліть тимчасове правило для елементів span, яке було додано раніше, а потім збережіть і поновіть, щоб три плаваючих елемента знову опинилися поруч в одному рядку. Іншими словами, видаліть правило:

span {

width: 34%;

}

Тепер плаваючі елементи тісно поєднані разом, і суміжний текст починається відразу після останнього плаваючого елементу (якщо тільки ви не використовуєте Microsoft Internet Explorer 6 або більш старий, у цьому випадку з’являється 3-піксельний зазор праворуч у зв’язку з трьох-піксельною помилкою з’єднання). Як можна створити деякий простір навколо плаваючого боксу? Відповіддю будуть поля!

  1.  Давайте зробимо це на середньому плаваючому елементі – змініть правило CSS для середнього плаваючого елементу наступним чином, а потім збережіть і обновіть:

#span-b {

float: left;

background-color: #ccf;

color: #003;

padding: 1em;

margin-left: 1em;

margin-right: 1em;

}

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

  1.  Можна задати також вертикальні поля на плаваючому боксі – зробіть наступні зміни у правилі для третього плаваючого елементу, потім збережіть і поновіть.

#span-c {

float: left;

background-color: #fcc;

color: #300;

padding:2em 1em;

margin-top: 2em;

margin-bottom: 2em;

}

Це змушує третій плаваючий елемент переміститися вниз, і також є деякий додатковий простір нижче нього.

  1.  Так як ми займаємося експериментами, давайте подивимося, що станеться, якщо ми задамо негативні поля! Зробіть такі зміни в правилі для третього плаваючого елементу, потім збережіть і поновіть:

#span-c {

float: left;

background-color: #fcc;

color: #300;

padding:2em 1em;

margin-top: 2em;

margin-bottom: 2em;

margin-left: -4em;

}

Ви побачите тепер висновок, показаний на мал.4.

Мал.4. Тепер плаваючі елементи перекривають один одного!

Як щодо цього, а? Хто сказав, що плаваючі елементи не можуть з’являтися поверх інших плаваючих елементів? Зверніть увагу, як негативне ліве поле зміщує весь плаваючий елемент вліво. Використання негативних полів на плаваючих елементах може бути дуже корисно в деяких типах багатостовпцевих компонувань.

  1.  Очищення

Тепер, після розгляду основ плаваючих елементів, ми переходимо до тісно пов’язаної теми очищення.

Як ви бачили в прикладах в цій темі, текст буде обтікати навколо плаваючого елементу, а блокові бокси не зачіпаються плаваючими елементами. Інколи бажано гарантувати, що елемент не закінчується поруч з плаваючим елементом. Наприклад, заголовок, який вводить новий розділ статті, не повинен з’являтися поряд з зображенням з попереднього розділу. Значно краще якщо заголовок з’являться нижче зображення, навіть якщо зображення висовується нижче останнього параграфа. Єдиним способом зробити це є використання властивості clear на заголовку.

Іншим прикладом є повсюдно поширене трьох-стовпцеве компонування з нижнім колонтитулом у всю ширину. Якщо стовпці є плаваючими, властивість clear використовується на нижньому колонтитулі, щоб гарантувати, що він з’явиться нижче всіх стовпців – незалежно від того, який із стовпців виявиться самим довгим.

Властивість clear має три використовуваних значення: left, right і both. Також допустимими значеннями є значення none (за замовчуванням) і inherit.

Використання на якомусь елементі властивості clear: left означає, що згенерований нею бокс гарантовано з’явиться нижче всіх попередніх плаваючих боксів з лівого боку. Якщо використовується clear: both, то елемент з’явиться нижче всіх попередніх плаваючих елементів з обох сторін.

Очищення досягається зсувом елемента вниз (над його верхнім полем додається пусте місце), якщо буде потрібно, поки його верхній край не буде нижче всіх плаваючих боксів у вказаному напрямку. Давайте розглянемо приклад з метою додаткової ілюстрації.

  1.  Перш ніж робити це, давайте змінимо таблицю стилів. Видаліть правила для #span-b і #span-c, так щоб ліворуч залишився тільки зелений плаваючий елемент. Перевірте, що його нижнє заповнення досить велике, щоб поширитися на другий параграф.
  2.  Додайте наступне правило для другого параграфа, потім збережіть і поновіть:

#p2 {

clear: left;

}

Бачите! Другий параграф зміщується вниз, поки не звільниться повністю від плаваючого елементу, як видно на мал.5.

Мал.5. Другий параграф тепер зміщений нижче першого

Щоб ще більше все заплутати, можна використовувати float і clear в одному елементі.

  1.  Додайте правило для другого плаваючого елементу, і нехай він очищає перший плаваючий елемент, потім збережіть і поновіть:

#span-b {

float: left;

clear: left;

padding: 1em;

background-color: #ccf;

color: #003;

}

Синій плаваючий елемент тепер з’являється нижче зеленого плаваючого елементу, повністю поза параграфом предка. Так як він теж зміщений вліво, другий параграф зміщується вниз ще далі, щоб його очистити.

  1.  Контейнерні плаваючі елементи

Як ви бачили вище, бокс предок зазвичай не розширюється, щоб охопити плаваючого нащадка. Це часто може створювати плутанину, наприклад, коли всі нащадки елемента є плаваючими, коли створюється горизонтальне меню з неупорядкованого списку, роблячи плаваючими всі елементи li. Так як плаваючі бокси витягуються з потоку і не впливають на бокс предок, то всі плаваючі нащадки роблять по суті предка порожнім і він схлопнется до нульової висоти. Іноді це небажано, наприклад, якщо ви хочете задати для предка фон. Якщо предок має нульову висоту, то ніякий фон не буде видно.

Очевидно, що потрібен певний механізм, що дозволяє розширити бокс предок, щоб він охопив своїх плаваючих нащадків. Традиційний метод полягає у додаванні в розмітку додаткового елемента, відразу перед закриваючим тегом предка, і завдання на ньому clear: both. Це працює, але це не досить добре, тому що включає використання додаткової непотрібної, несемантичної розмітки. На щастя є інші способи, які будуть зараз розглянуті.

Перший метод полягає просто в перетворенні на плаваючий також елемент предка. Плаваючі бокси завжди будуть розширюватися щоб охопити своїх плаваючих нащадків.

  1.  Щоб перевірити це у нашому прикладі документа, знову видаліть правило для #span-b, і зробіть наступним чином перший параграф плаваючим, перш ніж зберегти й оновити:

#p1 {

float: left;

}

Параграф тепер розширюється, поки не охопить зелений плаваючий елемент. Все це чудово працює, але іноді предок не може бути плаваючим елементом. Іншим способом, який не вимагає плаваючого предка, є завдання для властивості overflow елемента предка значення відмінного від visible. Якщо задати його як hidden й не визначити висоту, то предок буде охоплювати плаваючих нащадків.

  1.  Замініть останнє правило наступним, потім збережіть і обновіть сторінку:

#p1 {

overflow: hidden;

}

Відзначимо, що останній метод не працює в браузері Internet Explorer 6 або більш старій версії.

  1.  Укладання в оболонку

Як згадувалось раніше, перетворення строкового боксу в плаваючий робить його блоковим боксом, дозволяючи тим самим визначити для нього розміри і вертикальні поля. Плаваючий блочний бокс також має дивовижні властивості: якщо ширина не визначена, то бокс буде стискуватися “створюючи оболонку” навколо свого контенту. Це не було видно в прикладі документа, коли плаваючим був зроблений перший параграф, оскільки він мав достатню кількість контенту, щоб заповнити все вікно (якщо тільки у вас не надто широкий монітор).

Давайте зробимо плаваючим останній параграф, щоб побачити результат. Фактично, просто щоб внести деяку різноманітність, давайте змістимо його праворуч!

Додайте наступне правило в таблицю стилів, потім збережіть і поновіть сторінку:

#p3 {

float: right;

}

Параграф, який містить “Hello, World!”, буде тепер зміщатися вправо, і буде мати ширину наявного тексту плюс деяке заповнення, яке було визначено в попередньому правилі для всіх параграфів.

  1.  Центрування плаваючого елементу

Іноді ви захочете зробити елемент плаваючим – можливо, щоб змусити його охопити плаваючих нащадків – зберігаючи його при цьому горизонтально центрованим в його предка. Тут є проблема: ви не можете використовувати звичайний прийом завдання лівого і правого полів як auto для плаваючих елементів, і не існує такого значення як float: center. Чи існує тут якийсь спосіб обійти цю проблему?

Таке рішення є. Спеціаліст по CSS Поль О’Брайен пояснює, як це можна зробити, у своїй статті “Коли float не є float?”. Це включає додатковий елемент оболонки, але з цим можна змиритися. Метод використовує відносне позиціонування, яке ми розглянемо в наступній темі про статичне і відносне позиціонування CSS. Зміщаючи елемент оболонки вправо, а потім зміщуючи плаваючий елемент знову вліво, ви можете в дійсності центрувати загорнутий в оболонку плаваючий елемент невідомої ширини!

Давайте спробуємо це зробити. У наступному прикладі ми додаємо на сторінку панель горизонтального меню на основі неупорядкованого списку з плаваючими пунктами.

  1.  Вставте наступну розмітку одразу після тегу <body> в документі HTML:

<div class="wrap">

<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Services</a></li>

</ul>

</div>

<!--Internet Explorer needs this-->

<div class="clear" > </div>

  1.  Додайте наступні правила CSS в таблицю стилів, щоб оформити меню:

#menu {

margin: 0;

padding: 0.5em;

font-family: Verdana,sans-serif;

}

#menu li {

float: left;

list-style-type: none;

margin: 0 0 0 0.5em;

padding: 0.25em;

background-color: #600;

color: #ff9;

border: 2px solid #f00;

}

#menu a {

color: #ff9;

text-decoration: none;

}

.wrap {

float: left;

margin-bottom: 2em;

}

.clear {

clear: left;

height: 1px;

margin-top: -1px;

}

  1.  Збережіть обидва файли й оновіть сторінку в браузері. Ви побачите своє меню у верхньому лівому кутку. Давайте зробимо його горизонтально центрованим.
  2.  Змістіть елемент оболонки на половину сторінки, модифікуючи правило для .wrap, як показано нижче:

.wrap {

float: left;

margin-bottom: 2em;

position: relative;

left: 50%;

}

Меню буде починатися в горизонтальному центрі сторінки, але це не те, що ми хочемо – воно занадто зміщене вправо, тому треба змістити його трохи назад ліворуч. Так як оболонка є плаваючою, то вона скорочується відповідно до розміру списку. Ви хочете змістити список на відстань, яка дорівнює половині його ширини, що означає також половину ширини оболонки, тому робимо зсув на -50%.

  1.  Модифікуємо правило #menu наступним чином:

#menu {

margin: 0;

padding: 0.5em;

font-family: Verdana,sans-serif;

position: relative;

left: -50%;

}

Меню тепер центроване; єдина проблема полягає в тому, що ви можете отримати горизонтальну панель прокрутки в залежності від ширини списку та вікна браузера. Це пов’язано з тим, що ви змістили елемент оболонки на половину екрану; якщо список буде ширше половини вікна, частина його опиниться за межами екрану.

  1.  Можна позбутися від цього, задаючи властивість overflow: hidden на відповідному елементі предка, щоб зробити переповнення прихованим. У цьому випадку предком оболонки є body. Іноді неможливо приховати переповнення на елементі body, і в цьому випадку потрібно буде створити оболонку для оболонки, проте в даному випадку все нормально.

Додайте наступне правило в таблицю стилів:

body {

overflow: hidden;

}

  1.  Насправді є ще одна проблема. Якщо подивитися на це в Internet Explorer, ви побачите, що все, як і раніше, працює неправильно. Рішення проблеми в тому, щоб зробити плаваючим сам список, але тільки в Internet Explorer, так як це не працює в інших браузерах. Це можна обійти використовуючи невеликий прийом, який гарантує, що це правило застосовує тільки браузер Internet Explorer.

Додайте наступне правило в таблицю стилів:

* html #menu {

float: left;

}

  1.  Помилки!

Плаваючі елементи та очищення є дуже корисними, але, на жаль, більшість – якщо не всі – браузерів мають помилки реалізації цих властивостей. Internet Explorer 6 містить величезний масив дивної поведінки з плаваючими елементами, включаючи зникаючий контент, подвоєння полів і сумно відому помилку з 3-піксельним зазором. Але навіть Firefox і Opera не повністю вільні від помилок, коли мова йде о плаваючих елементах й очищенні.

  1.  Резюме

Плаваючий бокс зміщується якомога далі вліво або вправо в своєму елементі предка. Плаваючий бокс витягується з потоку документа і не впливає на бокс предок або наступні блокові бокси, хоча суміжні лінійні бокси коротшають. Коли для плаваючого боксу недостатньо простору в рядку у зв’язку з попередніми плаваючими елементами, він зміщується вниз поки не зможе розміститися (або поки не буде інших плаваючих елементів).

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

Створення плаваючих елементів тягне за собою зсув контенту вниз, якщо буде потрібно, поки верхній край контенту не буде нижче нижніх країв всіх плаваючих боксів у вказаному напрямку.

Центрування плаваючого боксу в оболонці можливо за допомогою додавання елемента оболонки і деякого обачливого використання відносного позиціонування.

  1.  Контрольні запитання
  •  Що станеться, якщо плаваючий елемент з’являється в середині параграфа; тобто, якщо перед плаваючим елементом є текст? Обов’язково перевірте це в різних браузерах, так як вони ведуть себе по різному. Opera і Safari роблять це правильно, в той час як Firefox і Internet Explorer – ні.
  •  Як плаваючі елементи можна використовувати для виведення піктограм зображень в галереї “осередків” однакового розміру, не використовуючи таблицю компонування?
  •  Як можна створити вертикальне навігаційне меню на лівій стороні сторінки і стовпець контенту на правій, так щоб текст контенту не загортали під меню?
  •  Дуже поширене компонування Web-сайту складається з заголовка в повну ширину, нижче якої знаходяться три стовпці контенту і потім нижній колонтитул в повну ширину. Як можна отримати таку компоновку за допомогою плаваючих елементів і очищення?


 

А также другие работы, которые могут Вас заинтересовать

23709. Работа с математическими моделями 61 KB
  Количество в м Стоимость в руб. Шерсть d 3 420 000 Шёлк с Сначала надо найти стоимость шерсти: 3d затем стоимость шёлка: 420 000 – 3d что бы найти цену шёлка6 надо его стоимость разделить на количество купленного шёлка: 420000 – 3d : c Если d = 80 000 c = 2 420000 – 380 000 : 2 = 90 000 Ответ: цена шёлка 90 000 руб. Количество Стоимость в руб. Хлеб а 3 батона Яблоки b 2 кг Что бы найти стоимость всей покупки надо знать стоимость хлеба и стоимость яблок.
23710. Работа с математическими моделями 57.5 KB
  При решении последнего примера учащиеся вспоминают свойство 1 при умножении: а 1 = 1 а = а − Расположите полученные результаты в порядке возрастания. – Какие свойства умножения вы использовали Распределительное свойство умножения относительно сложения и вычитания: аb c = аb ac аb – c = аb – ac свойство 1 при умножении: а  1 = а. – Какое свойство умножения вы использовали Свойство 1 при умножении. – Како теперь свойство можно применить Распределительное свойство умножения относительно сложения.
23711. Математические выражения и математические модели 76.5 KB
  а Графическая модель: Не известно количество девочек x – одна часть и мальчиков но сказано что мальчиков в 3 раза больше x3 или 3x – вторая часть всего целое 48 человек. x 3x = 48 x x3 = 48 Используем свойство 1 при умножении: a1 = 1a: 1x 3x = 48 x1 x3 = 48 Используем распределительное свойство умножения: ab c = ab ac: x1 3 = 48 Найдём сумму стоящую в скобках: 4x = 48 x4 = 48 Что бы найти неизвестный множитель надо произведение разделить на известный множитель: x = 48 : 4 x = 12 x –...
23712. Степень числа 46.5 KB
  Цели урока: – сформировать понятие степени способность к чтению и записи выражений со степенями; – повторить и закрепить смысл умножения натуральных чисел понятия простого и составного числа зависимость между компонентами и результатами арифметических действий тренировать вычислительные навыки способность к анализу и решению задач Самоопределение к деятельности. – Доброе утро ребята – Что нового и интересного вы узнали на предыдущих уроках Мы научились раскладывать числа на простые множители находить НОД и НОК чисел разными...
23713. Задачи для самопроверки (подготовка к контрольной работе) 99 KB
  – Какие свойства чисел используются при упрощении буквенных выражений Переместительное сочетательное распределительное. На доске: – Какие методы работы с моделями мы знаем Нахождение значений выражений решение уравнений используя распределительное свойство метод проб и ошибок метод полного перебора решение уравнений методом весов. 1 16x – 7x – 2x = x16 – 7 – 2 = 7x; Используем распределительное свойство умножения относительно вычитания ac – bc = ca – b 2 x : 5 Количество варенья в одной...
23714. Запись, чтение и составление выражений 40.5 KB
  Цели урока: формировать представление о математических выражениях как о словах математического языка повторить понятия числового и буквенного выражения учить делать перевод текстов с русского языка на математический и наоборот повторить и закрепить приёмы устных вычислений нумерацию натуральных чисел смысл сложения и вычитания взаимосвязь между ними сложение и вычитание многозначных чисел решение задач понятие периметра многоугольника развивать внимание логическое мышление способности к обобщению исследовательские умения...
23715. Запись, чтение и составление выражений 58 KB
  Запишите выражения для ответа на вопрос задачи: а Площадь прямоугольника с см2 а ширина – 7см. – Почему в классе разные ответы а часть ребят совсем не справилась с заданием Что необходимо знать что бы с заданием справились все Для решения первой задачи надо знать как найти ширину прямоугольника по его площади и длине а для решения второй задачи формулу площади прямоугольника. – Поднимите руку те кто не знает формулу нахождения площади прямоугольника К решению этой задачи учащиеся были подготовлены на этапе актуализации по этому...
23716. ХУДОЖНЄ ВИХОВАННЯ В УМОВАХ НОВОЇ ЕСТЕТИЧНОЇ СОЦІАЛЬНОЇ РЕАЛЬНОСТІ В УКРАЇНІ 71 KB
  На основі аналізу феномена „масова культура” з’ясувати проблему його впливу на поведінку людей та необхідність прищеплення естетичного смаку особистості...
23717. Значение выражения, урок рефлексии 59 KB
  Повторить и закрепить понятия буквенного и числового выражения взаимосвязь между арифметическими действиями решение уравнений на сложение и вычитание алгоритмы сложения и вычитания многозначных чисел. Здравствуйте ребята Чему мы учились на прошлых уроках Составлять читать и записывать математические выражения. В каком виде мы записывали ответ В виде числового или буквенного выражения.