Як розібратися в CSS

299
  • Float — створення плаваючих елементів в коді CSS
  • Clear (both, left, right) і горизонтальне меню на Float
  • Блокова верстка — створення колонок за допомогою Float
  • Здрастуйте, шановні читачі блогу . Сьогодні ми продовжуємо вивчати класичний CSS і на черзі у нас плаваючі елементи, створювані з допомогою Float. Так само ми торкнемося призначення правила Clear (both, left, right) і подивимося на прикладах горизонтального меню і трехколоночного макета, як все це можна використовувати на практиці.

    Як розібратися в CSS

    Трохи раніше ми з вами вже розглянули багато аспектів мови стильової розмітки, про які ви можете дізнатися зі складається по ходу розповіді Довідника CSS. Таблиці каскадних стилів вивчати значно складніше, ніж чистий Html, і якщо вам щось здасться складним і на перших порах не зрозумілим, то нічого дивного і страшного тут немає. Спробуєте на практиці, наб’єте руку і все устаканиться. Удачі!

    Float — створення плаваючих елементів в коді CSS

    Коли ми вставляємо в документ кілька тегів поспіль, то очікуємо їх поява на сторінці приблизно в тому ж порядку, в якому вони і були прописані в коді. Наприклад, при створенні тексту ми вставляємо заголовки, абзаци, списки і т. п., щоб побачити їх на веб наступними в тому ж самому порядку.

    Але в CSS є два правила, які можуть це змінити. Мова йде про float і position. Коли до тегам не застосовуються ці два правила, то такий варіант називається кодом у нормальному потоці.

    З допомогою float ми створюємо так звані плаваючі елементи. До речі, навіть у чистому Html ми вже з вами стикалися з подібним, коли для картинок прописували атрибут Align зі значеннями Left або Right (читайте про обтікання картинок текстом і тег Img).

    У цього правила є три можливих значення (по специфікації консорціуму W3C), причому за умовчанням використовується значення None, тобто спочатку у нас ніяких плаваючих елементів:

    Як розібратися в CSSЯк розібратися в CSS

    Значення Left і Right як раз і дозволяють створювати плавання. При цьому властивості такого тегу поміняються і він інакше буде взаємодіяти з іншими. Давайте розглянемо все це на прикладі. Візьмемо один рядковий тег Span і два блочних елемента Div.

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

    Всі правила я буду прописувати з допомогою атрибута Style (у професійної верстки цей спосіб практично не використовується), про який ви зможете прочитати за наведеним посиланням. Також для наочності я подсвечу теги фоном з допомогою правила background:

    Рядковий
    Блочний
    Блочний

    Як розібратися в CSSЯк розібратися в CSS

    Тепер давайте пропишемо для Span правило float зі значення Left і подивимося що з цього вийде (для наочності ще поставимо нашу знову спеченому плаваючого блоку ще й відступ margin у 5px зі всіх сторін (margin:5px), щоб було зрозуміліше його взаємовідносини з сусідніми тегами:

    Як розібратися в CSSЯк розібратися в CSS

    Наш елемент починає плавати вліво (бо ми прописали float:left). При цьому заробили ширина і висота, задані в правилах height і width, не дивлячись на те, що Span спочатку був рядковим тегом. Крім цього заробив і margin по висоті (відступ до сусідів), який для рядкових тегів спочатку був даремний.

    Звідси ми робимо висновок, що після прописування float елемент став зовсім іншим і не схожим на те, чим він був до цього. Крім цього він став по-іншому взаємодіяти з іншими тегами.

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

    Частіше всього це буде контейнер Div — ідеальний для побудови блочної схеми, т. к. спочатку має нульові margin і padding, а height і width у нього мають значення Auto. Т. о. Div є структурним блоком, так само як і Span, у якого теж все нульове.

    Але давайте повернемося до наших баранів, а саме опишемо всі ті зміни, які відбуваються з нею, коли до нього застосовується правило Float зі значенням Left або Right:

  • Не залежно від того, яким він був до цього, він стає блоковим (відповідає display:block)
  • Не дивлячись на те, що він стає блоковим, його розмір буде визначатися об’ємом укладеного в нього контенту (проявляється деяка специфіка). Тобто якщо я в нашому прикладі приберу значення ширини плаваючого контейнера (width:250px), то ширина його буде визначатись кількістю укладеного в нього тексту:
    Як розібратися в CSSЯк розібратися в CSS
  • Плаваючий елемент (float left або right) в «Margin-colloapse» не бере участі, тобто не ділиться з сусідніми елементами своїми відступами.
  • Вони не помічають сусідні блокові елементи (з display: block), тобто вони з ними не взаємодіють. Це можна бачити з наведеного трохи вище скріншота, де зелений блок (div — зелений прямокутник) стоїть так, як ніби плаваючого Span і не існує.
  • А ось малі теги (з display: inline) обтікають плаваючі блоки. На наведеному трохи вище скріншоті це видно по тому, що текст укладений у Div обтікає Span.
  • Clear (both, left, right) і горизонтальне меню на Float

    Виникає питання: а чи можна блоки, які стоять у коді нижче плаваючого елементу (з float:left або right), змусити з ним взаємодіяти (тобто вибудовувати своє положення в залежності від розмірів плаваючих блоків)? Виявляється, можна, і для цього в CSS передбачено спеціальне правило Clear. Воно має чотири допустимих значення (none використовується за замовчуванням):

    Як розібратися в CSSЯк розібратися в CSS

    Коли ми для будь-якого Html тега прописуємо CSS правило Clear, то це означає, що цей елемент повинен буде врахувати всі плаваючі і стоять перед ним в коді блоки:

  • Зліва, якщо прописаний clear:left
  • Праворуч при right
  • Скрізь при clear:both (означає з обох сторін)
  • Давайте спробуємо подивитися на прикладі clear:left для наведеного трохи вище скріншота (його ми пропишемо для зеленого Div контейнера):

    Float блок
    Блочний
    Блочний

    Як розібратися в CSSЯк розібратися в CSS

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

    Якщо ж використовувати clear:both, то будуть враховані всі плаваючі блоки (і вліво, і вправо — які знайдуться). Both використовують в тих випадках, коли невідомо з якою з сторін з’явиться елемент плаваючий і високий. Саме його і можна найчастіше зустріти в коді в наш час.

    Ну, і давайте на невеликому прикладі подивимося для чого ж може бути використано Float при верстці сайту. Справа в тому, що з допомогою плаваючих блоків можна створити горизонтальне меню з звичайного списку. Нехай у нас є маркований Html списку UL такого виду:

    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    • Пункт 5
      • Виглядати це неподобство буде приблизно так:

        Як розібратися в CSSЯк розібратися в CSS

        Тепер давайте приберемо маркери з допомогою CSS правила list-style значення None, а також зробимо малі теги гіперпосилань блоковими з допомогою display:block, подсветим їх якимось фоном і задамо невеликі зовнішні відступи margin для елементів списку, щоб їх розклеїти один від одного.

        Для різноманітності спробуємо задати властивості з допомогою тега Style, який прописується між відкриваючим і закриваючим Head:

        .menu{
        list-style:none;
        margin:0;
        padding:10px;
        }
        .menu li a{
        display:block;
        padding:10px;
        background:#ccf;
        }
        .menu li{
        margin:5px;
        }

        В результаті картинка нашого майбутнього шедевра буде виглядати набагато більш схожим на меню, але, правда, на вертикальне меню, а адже нам хочеться створити горизонтальне за допомогою Float:

        Як розібратися в CSSЯк розібратися в CSS

        Зробити з цього меню горизонтальне можна буде, лише додавши елементу списку Li правило float:left:

        .menu li{
        margin:5px;
        float:left;
        }

        Як розібратися в CSSЯк розібратися в CSS

        Чому вийшло саме так? Плаваючий блок (з float відмінним від none), коли йому треба вишикуватися, дивиться на сусідні теги, на межі контейнера, і встає так високо на вебсторінці, як тільки зможе. Так і зробив «Пункт 1» — встав максимально високо, як тільки міг і потім вже поїхав вліво (бо у нього прописано float:left).

        «Пунктом 2» теж вистачило місця стати максимально високо, а потім він поїхав вліво і уткнувся в попередній плаваючий блок. Теж саме можна сказати і про інших пунктах нашого горизонтального меню. Але що ж станеться, якщо в контейнері по ширині не буде вистачати місця для всіх пунктів меню? Давайте подивимося, штучно обмеживши область перегляду:

        Як розібратися в CSSЯк розібратися в CSS

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

        Але якщо б, наприклад, висота першого пункту виявилася б більше, ніж у четвертого, за яким «Пункт 5» визначив свою верхню межу, то вийде ось така картина:

        Як розібратися в CSSЯк розібратися в CSS

        Якщо виявиться занадто високим «Пункт 4», то картина зміниться на таку:

        Як розібратися в CSSЯк розібратися в CSS

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

        Звідси, до речі, випливає висновок, що якщо текст в пунктах такого горизонтального меню на основі css правила float буде дуже довгим, то може вийти саме так, як було показано на попередніх скріншотах. Можливо, що робити подібне меню буде простіше з допомогою фонових картинок, розмір яких фіксований. Можна використовувати і display:table, але створення таких меню це вже тема окремої статті і, можливо, навіть не одного.

        Блокова верстка — створення колонок в макеті з допомогою Float

        Але основне призначення Float це, звичайно ж, створення колонок при використанні блочної верстки. Я вже про це дуже докладно писав у серії статей, присвяченій створенню двох і трехколоночных макетів при Div верстці.

        При створенні макету сторінок вам завжди буде необхідно вибудовувати блокові області поруч один з одним (наприклад, область лівої колонки, область з контентом і правої колонки). Звичайні блоки в CSS встають один під одним. Як же їх поставити поруч один з одним? Звичайно ж, з допомогою плаваючих елементів на основі Float.

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

        Вміст лівої колонки
        Вміст правої колонки
        Текст області вмісту

        Потім для класів контейнерів лівої і правої колонки задаємо float:left і right (контейнери для наочності підсвічуються фоном з допомогою background), а також обмежуємо їх ширину, з width:

        #left{
        background:#ccf;
        width:100px;
        float:left;
        }
        #right{
        background:#fcc;
        width:150px;
        float:right;
        }
        #center{
        background:#cfc;
        }

        Таким чином ми отримали дві бічні колонки фіксованої ширини за допомогою чарівного правила Float. Залишається тільки розібратися з областю контенту:

        Як розібратися в CSSЯк розібратися в CSS

        Далі потрібно центральну колонку відсунути зліва на ширину ліворуч, а праворуч — на ширину правою за допомогою все того ж правила margin (а саме для нашого прикладу margin:0 150px 0 100px;):

        #center{
        background:#cfc;
        margin:0 150px 0 100px;
        }

        Як розібратися в CSSЯк розібратися в CSS

        Плавають тільки права і ліва колонки, а центральна немає. Ще раз нагадую, що про блочну верстку ви можете почитати за наведеною трохи вище посиланням. У статті будемо розглядати не менш цікаве і дуже значуща CSS правило Position.

        Удачі вам! До зустрічей на сторінках блогу