Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
float

«Плавающие» элементы позволяют размещать содержимое документа, следуемое за данными элементами, вдоль своей стороны (в этом случае используются свойство float со значениями right и left) либо запрещают размещать содержимое (в этом случае используется свойство clear с теми же значениями). Если значение свойства float - left, то содержимое будет размещено с правой стороны, если right, то содержимое будет размешено справа от этого элемента.

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

</rule> Свойство float применимо к элементам, размещаемым только в нормальном потоке, к элементам с абсолютным позиционированием данное свойство не применимо.</rule>

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство float</TITLE>
  5. <STYLE type="text/css">
  6. IMG { float: left }
  7. P, IMG { margin: 0em 2em}
  8. </STYLE>
  9.</HEAD>
10.<BODY>
11.<IMG src=img.jpg alt="Пример float">
12.<P>Лучше хлеб с солью в покое
13.и без печали, чем множество
14.блюд многоценных в печали и горе.
15.Иоанн Златоуст.
16. </BODY>
17.</HTML>
18.

Правила, которые должны соблюдаться при использовании данного свойства:

  1. Если в структуре документа, до элемента, в отношении которого применено свойство float со значением left существует такой же элемент (со свойством float:left;) то последний элемент будет расположен справа от правого края раннего элемента (со свойством float:left;).
  2. Правый край элемента, свойство которого float со значением left, не может находится у левого края элемента, свойство которого float со значением right.
  3. Верхняя граница плавающих элементов не может быть выше верхней границы содержимого элемента.
  4. Верхняя граница плавающих элементов не может быть выше верхней границы любого элемента или плавающего элемента, расположенных раньше в структуре документа.
  5. Плавающие элементы должны размещаться как можно выше.
  6. Плавающие элементы размещаются настолько далеко друг от друга, на сколько это позволяет горизонтальное и вертикальное пространство.

Правила применяемые при соотношении свойств float, position, display, указанные в порядке приоритета предшествующего правила над последующими правилами.

  1. Если значение свойства display - none, то браузер должен игнорировать свойства position и float.
  2. Если установлено значение absolute или fixed свойства position, свойство display будет соответствовать block, а свойство float будет иметь значение none.
  3. Если свойство float имеет значение отличное от none, то свойство display будет установлено как block и блок становится «плавающим» блоком.
  4. Все остальные значения свойства display применяются так, как описано в спецификации CSS2.

Пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Float example</TITLE>
  5. <STYLE type="text/css">
  6. IMG { float: left }
  7. IMG { margin: 0 2em; border:5px solid #cadceb;}
  8. </STYLE>
  9. </HEAD>
10. <BODY>
11.<P><IMG src=img.jpg alt="Пример float">
12.Лучше хлеб с солью в покое
13.и без печали, чем множество
14.блюд многоценных в печали и горе.
15.Иоанн Златоуст.
16.
17. </BODY>
18.</HTML>
19.
20.
Пример свойства float для изображения.
Пример свойства float для изображения.

Элементы с плавающим смещением могут накладываться на другие элементы, например, когда последующие элементы имеют отрицательное значение margin. Содержимое, фон и рамки строчных элементов при перекрытии элементом, размещенным с плавающим смещением, находятся спереди данного элемента.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Взаимодейтсвие элементов со свойством float и без него</TITLE>
  5. <STYLE type="text/css">
  6..first {
  7.width:250px;
  8.height:250px;
  9.border:2px solid grey;
10.background-color:rgb(125,5,25);
11.font: bold italic large Palatino, serif;
12.color:#fff;}
13..second {
14.width:250px;
15.height:250px;
16.float: left;
17.border:2px solid green;
18.margin-top: -245px;
19.margin-left: 20px;
20.background-color:rgb(41,5,125);
21.}
22. </STYLE>
23.</HEAD>
24.<BODY>
25.<div class="first">
26.Текст, расположенный внутри не
27.плавающего блочного элемента с классом "first".
28.Данный текст будет находиться над любым элементом
29.со свойством float, если последний находится над
30.поверхностью элемента содержащего этот текст.
31.</div>
32.<div class="second">
33.</div>
34. </BODY>
35.</HTML>
36.
Пример свойства float для изображения.
Пример свойства float для изображения.

Фон и рамки блочных элементов наоборот находятся позади элементов, размещенных с плавающим смещением. Однако содержимое блочных элементов находится спереди «плавающих» элементов.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Float example</TITLE>
  5. <STYLE type="text/css">
  6. body {
  7. width:400px;
  8. }
  9..first {
10. display:inline;
11. width:250px;
12. height:250px;
13. border:2px solid grey;
14. background-color:rgb(125,5,25);
15. font: bold italic large Palatino, serif;
16. color:#fff;}
17..second {
18. width:250px;
19. height:250px;
20. float: left;
21. border:2px solid green;
22. margin-top: -245px;
23. margin-left: 20px;
24. background-color:rgb(41,5,125);
25. }
26. </STYLE>
27. </HEAD>
28. <BODY>
29. <div class="first">
30. Это не плавающий строчный элемент,
31. содержимое фон и рамки, которого находится
32. спереди «плавающих» элементов.
33. </div>
34.
35. <div class="second">
36.
37. </div>
38. </BODY>
39.</HTML>
40.
41.
Пример свойства float для изображения.
Пример свойства float для изображения.


Доступ и установка с jQuery

  • Получить свойство float: val = $("div").css("float");
  • Установить свойство float: $("div").css({"float":"..."});
  • Установить свойство float: $("div").css("float","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org