Странность с clear: both.

[ksafan]

Всем привет! Я новичок в css, и хотелось бы задать вопрос, по как мне кажется странному поведению свойства clear. Следующий пример не рабочий, в нём нет нужды сделать всё правильно, или решить проблему, он написан для того что бы понять по чему так происходит. Предположим у нас есть один блок, в который вложено два других бока, каждый из них имеет совой заголовок, и ещё несколько вложенных блоков ( в примере блок только один), с заголовком статьи, и датой её создания, за который следует некий текст.

 

Код-html

<div id="content">  <div id="block1">    <h4>Название блока</h4>    <div class="wrap">        <h5>Заголовок для статьи!</h5>        <p class="date">дата: 12.08.2014 14:52</p>            <p class="text">            Various versions have evolved over the years, sometimes by accident,            sometimes on purpose (injected humour and the like).Various versions have evolved over the            years, sometimes by accident,sometimes on purpose (injected humour and the like).            Various versions have evolved over the years, sometimes by accident,            sometimes on purpose (injected humour and the like).Various versions have evolved over the            years, sometimes by accident,sometimes on purpose (injected humour and the like).            </p>    </div>  </div>  <div id="block2">    <h4>Название блока</h4>    <div class="wrap">        <h5>Заголовок для статьи!</h5>        <p class="date">дата: 12.08.2014 14:52</p>        <p class="text">            Various versions have evolved over the years, sometimes by accident,            sometimes on purpose (injected humour and the like).Various versions have evolved over the            years, sometimes by accident,sometimes on purpose (injected humour and the like).            Various versions have evolved over the years, sometimes by accident,            sometimes on purpose (injected humour and the like).Various versions have evolved over the            years, sometimes by accident,sometimes on purpose (injected humour and the like).        </p>    </div>  </div></div>

В ccs для блока wrap я использую классы, да бы показать идентичность этих двух блоков.

 

Код-css

#content{    width: 800px;    margin: auto;}#block1{    width: 390px;    float: left;}#block2{    width: 390px;    margin-left: 410px;}h4{    margin: 0;}h5{    float: left;    margin: 0;    padding-top: 3px;}.date{    text-align: right;}.text{    clear: both;}

Заголовку H5 задано свойство float: left, что бы поставить дату с права от заголовка, в параграфе с текстам, за датой задано свойство clear: both. В блоке block1 всё работает нормально, а вот в блоке block2 это свойство отодвинет текст вниз на высоту блока с текстом. Тоже самое сделает свойство clear: left, и тока задав для блока #block2 .text clear: right мы вернём этот блок на место.Хотя тут вполне можно и обойтись без clear, всё таки хотелось бы понять почему так происходит? В этом и есть мой вопрос.

[Switch74]

Причина в смысле clear:both

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

у вас #block1 имеет float:left; следовательно

ваш .text с clear:both из #block2 может находиться только ниже #block1

чтобы этого избежать укажите для #block2 float и уберите margin

[ksafan]

Спасибо большое! Теперь разобрался.