slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1029
Теги: css, div, css3, float, both, left, right

Довольна часто встречается ситуация, когда из-за того, что элементам задают различные параметры свойства float. Из-за этого другие элементы ведут себя не так как нам хотелось бы. Справится с такой ситуацией нам поможет свойство clear с параметром both CSS языка.

Давайте рассмотрим пример, когда это свойство необходимо. Допустим у нас есть такая HTML стурктра:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/css/template.css" type="text/css" />
</head>
<body>
    <div class="left">div.left элемент</div>
    <div class="right">div.right элемент</div>
    <div class="clear">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat </div>
</body>
</html>

 

И соответствующие CSS стили к нему:

 

body {margin:0; padding:10%; font-size:16px; color:#fff;}

div.left {width:50%;
            float:left; /* прижимает див к левой стороне и позволяет элементам обтекать его справа */
            background:#009966; 
            height:300px; 
            text-align:center; 
            font-size:88px;} 
div.right {width:40%; 
            float:right; /* прижимает див к правой стороне и позволяет элементам обтекать его слева */
            background:#CC3366; 
            height:300px; 
            text-align:center; 
            font-size:88px;}
div.clear {background:#666666;}

 

Посмотрев на код можно понять, два дива будут прижиматься к противоположным сторонам, а последний див будет содержать текст. Как вы думаете, это все будет выглядеть в браузере?

А вот как:

1

Так получилось, что последний див был зажат между двумя другими, почему такое произошло? Дело в том, что свойство float заставляет обтекать элемент, которому задается с противоположной стороны, которая задается этому свойству, это удобно для того, чтобы размещать два элемента на одной линии, но по разным краям, но вызывает проблему, если остается незаполненный промежуток, тогда в этот промежуток могут полезть элементы следующие дальше.

Если мы не хотим, чтобы структура сайта решилась по этой причине, то следующему элементу за таким нужно присвоить свойство clear, именно оно запрещает обтекание этим элементом. Это свойство принимает следующие параметры none - не запрещать обтекание; left - запретить обтекать элементы, прижатые к левой стороне; right - соответственно к правой; both - запретить обтекать любые элементы.

Если мы добавит следующий код в 15 строчку CSS стилей:

 

div.clear {background:#666666; clear: both;}

 

Тогда вот как это будет выглядеть в браузере:

2

Бывает по разным причинам, что такое свойство может мешать, либо после таких блоков у вас изменяющееся содержание, меняются элементы и устанавливать им всем это свойство неудобно, тогда между div.left, div.right элементами и последующими за ними ставят бесцветную разделяющую линию <hr> и ей задают это свойство. Результат будет аналогичен тому, что выше, но в некоторых ситуациях более удобен.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

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

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2078
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

В этой статье я расскажу о том, каким образом можно подключить сторонние шрифты на свой сайт, а так же дам пару полезных ссылок и советов.

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.