Матвей Земсков

Заметки веб-мастера

Четверг, 10 мая 2012 22:41

Очистка плавающих элементов. Свойства overflow и clear.

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

Как известно плавающие элементы (обладающие float: right; и float:left; для имитации табличной верстки) выпадают из нормального потока документа и в случае с приведенным ниже кодом:

HTML

<div class="news">
  <img src="/rect.gif" class="imag" style="width:150px;height:153px;"/> 
<p> Curabitur nec orci. Morbi laoreet. Praesent odio. Sed eu erat. 
Etiam id elit non quam auctor vestibulum. Fusce sollicitudin.Integer metus 
ipsum, ullamcorper id, posuere ac, porttitor eget, ligula. 
Phasellusnon risus eu ligula vehicula tincidunt. Quisque ante ante, euismod 
vehicula, euismod et, auctor et, sem.Proin tellus massa, adipiscing mollis, 
suscipit at, tempus et, metus.</p> 
<div> Nam laoreet leo quis felis. Pellentesque sed nisi. Proin pulvinar 
interdum ligula. Vivamus aliquet scelerisque eros. Donec sollicitudin accumsan 
urna. Etiam vulputate, sapien at tempor luctus, urna justo laoreet lectus, a 
viverra arcu diam at ipsum. Suspendisse vulputate tellus quis lectus. Nullam 
tempor, turpis ut lacinia placerat, massa nisi sagittis nulla, quis 
tempus sapien enim ac libero. Integer quis lorem at ipsum rutrum cursus. 
 </div> 
</div>

CSS

.news{ 
background: #CCFF99;
border:1px dotted #000000;
}

.imag{
float:left;
}

.news p{
float:left;
}

.news div{
float:left;
}

мы увидим следующую картину:

блоки выпали из нормального потока документа

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

Есть несколько способов достижения желаемого эффекта:

Присвоить контейнеру div.news свойство {overflow:hidden;} html-код оставить без изменений;

CSS

.news{
background: #CCFF99;
border:1px dotted #000000 ;
overflow:hidden;
}

.imag {
float:left;
}

.news p{
float:left;
}

.news div{
float:left;
}

Добавить к элементу-контейнеру div.news свойство {float:left;} и сделать его обтекаемым, а затем «очистить» следующим элементом, присвоив ему свойство clear:both; html-код не изменять;

CSS

.news{
background: #CCFF99;
border:1px dotted #000000 ;
float:left;
}

.imag {
float:left;
}

.news p{
float:left;
}

.news div{
float:left;
}

Применить трюк с псевдо - классом :after к контейнеру div.news (не работает в IE6/7), html-код оставить без изменений.

CSS

.news{
background: #CCFF99;
border:1px dotted #000000 ;
width:50%;
}

.news:after{
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}

.news img{
float:left;
}

.news p{
float:left;
}

Так как IE6 и IE7 не поддерживает псевдокласс :after для достижения нужного эффекта в этих браузерах нужно применить следующий код css к элементу div.news:

CSS

div.news{
display:inline-block;
}

*html div.news{
height:1%;
}

div.news{
display:block;
}

Этот код нужно разместить в отдельном файле, например, style.ie.css, подключив его к странице с помощью условных комментариев:

HTML

	
  <!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/style.ie.css" media="all" />
<![endif]-->

Надеюсь, что эти несколько несложных способов очистки плавающих элементов помогут начинающим веб–разработчикам при создании веб–страничек.

Прочитано 5929 раз
Другие материалы в этой категории: Создание верстки тянущейся по высоте на 100%. »
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх