Выравнивание плавающих элементов

Оцените материал
(0 голосов)

Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

 

 Например, пусть у нас задан следующий блок:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            #sidebar{
                float: left;
                width: 25%;
                padding: 10px;
            }
            #main{
                border-left: 1px solid #ccc;
                width:75%;
                padding: 15px;
                margin-left: 25%;
            }
        </style>
    </head>
    <body>
        <div id="sidebar">
            <h2>The standard Lorem Ipsum passage</h2>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore...</p>
        </div>
        <div id="main">
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
        </div>
    </body>
</html>

Просмотреть  пример

В сайдбаре довольно много текста, который, как ожидается, будет эффективно вписан в границы плавающего блока. Однако в реальности мы можем получить проблему:

Как видно из примера буквы вылезают из плавающего блока за границу, несмотря даже на то, что по идее в плавающем блоке должен быть установлен еще и внутренний отступ в 10 пикселей от правой границы. Почему так происходит? Зачастую браузеры своеобразно интерпретируют размеры элемента. В частности, у всех элементов по умолчанию для свойства box-sizing используется значение content-box, то есть при определении ширины и высоты элемента браузер будет прибавлять к значению свойств width и height также и внутренние отступы padding и ширину границы. В итоге это может привести к выпадению плавающих элементов из тех блоков, которые для них предназначены. Поэтому часто для всех элементов рекомендуется устанавливать для свойства box-sizing значение border-box, чтобы все элементы измерялись одинаково, а их ширина представляла только значение свойства width. Поэтому нередко в стилях добавляется следующий стиль:

* {
    box-sizing: border-box;
}

То есть значение box-sizing: border-box; устанавливается для всех элементов, и все они интерпретируются браузером одинаково. К примеру, добавим этот стиль в выше определенную страницу и мы получим уже несколько другой результат:

Рассмотрим другую проблему, которая связана с позиционированием плавающих элементов в контейнере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            *{
                box-sizing: border-box;
            }
            #header{
                background-color: #eee;
            }
            #nav{
                background-color: #f4f4f4;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            #nav ul{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            #nav li {
                float: left;
            }
            #nav ul a {
                display: block;
                width: 7em;
                padding:10px;
                border-left: 1px solid #ccc;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            #nav ul li:last-child a {
                 
                border-right: 1px solid #ccc;
            }
            #nav ul a:hover{
                background-color: #aaa;
                color: #f4f4f4;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Добро пожаловать на сайт</h1>
            <div id="nav">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Блог</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">О сайте</a></li>
                </ul>
            </div>
        </div>
        <div id="content"><p>helo world</p></div>
    </body>
</html>

Просмотреть  пример

Несмотря на то, что панель навигации определена в блоке с id header, визуально она явно не находится в элементе <head>. Ну и кроме того, здесь также можно увидеть, что появляются непонятные отступы, а следующий после хедера блок залезает на меню. Проблема отступов заключается в том, что браузер по умолчанию определяет для различных элементов встроенные стили. Поэтому может немного сбивать с толку, как и где эти стили определены, почему они применются. Нередко для решения этой проблемы разработчики просто сбрасывают некоторыt наиболее значимые стили для большинства элементов:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
                 
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

Другая проблема - наложение элемента div с основным контентом на плавающий блок навигационной панели решается довольно просто - установкой для этого элемента div следующего стиля:

clear: both;

Более сложной является проблема с выпадением плавающих элементов меню из границ блока-контейнера. Здесь есть два возможных варианта Решения. Первое решение состоит в добавлении к элементу, который представляет панель навигации, следующего стиля:

ul:after {
    content: " ";
    display: table;
    clear: both;
}

Второе решение состоит в том, чтобы сделать сам блок панели навигации плавающим:

#nav{
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
     
    float:left;
    width: 100%;
    clear: both;
}

Итак, с учетом выше сказанного изменим стили для веб-страницы (код html остается прежним):

*{
    box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
                 
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
#header{
    background-color: #eee;
}
#header h1{
    font-size: 1.3em;
    padding: 15px;
}
#nav{
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#nav ul{
    margin-left: 0px;
    padding-left: 0px;
    list-style: none;
}
#nav li {
    float: left;
}
#nav ul a {
    display: block;
    width: 7em;
    padding: 10px;
    border-left: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    text-align: center;
}
#nav ul li:last-child a {
                 
    border-right: 1px solid #ccc;
}
#nav ul a:hover{
    background-color: #aaa;
    color: #f4f4f4;
}
#nav ul:after {
    content: " ";
    display: table;
    clear: both;
}
#content{
    clear: both;
}

И теперь веб-страница будет выглядеть иначе, собственно как и должна:

Прочитано 650 раз Последнее изменение Суббота, 17 сентября 2016 14:58
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+