CSS свойство clear

skvor · April 24, 2012

http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Из htmlbook-а (я так понимаю) clear навешаный на плавающий блок, запрещает обтекать себя другим элементам. И нифига так не работает.

Из W3 (если я правильно понимаю инглиш) следует, что clear надо навешивать на тот элемент, контент которого может обтекать плавающие блоки.

Пример я отредактировал так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>clear</title>
  <style type="text/css">
   #layer {
    float: left; /* Обтекание блока по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    width: 40%; /* Ширина блока */
   }
  #layer + * { clear: left; } /* !!!
                                 Т.к. в IE6 это не работает,
                                 то выпендрёж соседних тегов надо заменить
                                 на селекторы тегов, которым запрещено
                                 обтекать "всё".
                              */
  </style>
 </head> 
 <body>

  <div id="layer">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>

  <!--div style="clear: left"></div-->

  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, 
  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
  odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore 
  te feugat nulla facilisi.</p> 

 </body>
</html>

это более правильно, т.к. не используется для форматирования HTML и соблюдается принцип разделения логической разметки и оформления.

Описание свойства состоит из двух предложений. Ошибка в первом.

Edited April 24, 2012 by skvor

ceil100 · April 24, 2012

Из htmlbook-а (я так понимаю) clear навешаный на плавающий блок, запрещает обтекать себя другим элементам.

неправильно понимаешь, отсюда и переливание из пустого в порожнее

читай внимательнее

SelenIT · April 24, 2012

Буквально определение из спецификации переводится как

Это свойство указывает, какие боковые стороны бокса(-ов) элемента не могут соприкасаться с предшествующими плавающими боксами. Свойство 'clear' не рассматривает "поплавки" внутри самого элемента или в других контекстах форматирования блоков.

Т.е. говорит элементу, что он сам (если речь о "поплавке") или его строчные потомки (если речь о блоке - а значит, и сам блок) должны целиком провалиться под самый высокий из вышестоящих "поплавков" с соответствующей стороны (с любой стороны в случае both). Если надо, для этого вводится просвет ("clearance", клиренс), который добавляется к верхнему margin-у и "отпихивает" элемент от предыдущего блока ровно настолько, сколько нужно, чтоб вышестоящие поплавки ему не мешали (см. тж. здесь).

skvor · April 24, 2012

Буквально определение из спецификации переводится как
Это свойство указывает, какие боковые стороны бокса(-ов) элемента не могут соприкасаться с предшествующими плавающими боксами.

таки правильно

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

Я б перевёл

(Это) свойство показывает, какие (боковые) стороны блочного элемента не должны примыкать к предыдущим плавающим блокам.

В любом случае, это никак не стыкуется с описанием http://htmlbook.ru/css/clear

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

ceil100 · April 24, 2012

http://jsfiddle.net/Rwwvr/

убери clear и блок провалится, он соприкоснулся с правой стороной плавающего блока, своей левой стороной

все правильно написано, читай внимательно

перенеси clear на float и ничего не изменится

Sign In

CSS свойство clear

Question

skvor

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

ceil100

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

skvor

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

Join the conversation

Forums

Important Information