Как известно плавающие элементы (обладающие 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]-->
Надеюсь, что эти несколько несложных способов очистки плавающих элементов помогут начинающим веб–разработчикам при создании веб–страничек.