No Image

Div class clear div

СОДЕРЖАНИЕ
218 просмотров
10 марта 2020

���������� ����� �������� ����� ��������, ������� ���������� �� ������� ������� ��������� ���-��������, ��������, �������. ���������� �������� ����������� ���������, �� � ������ ������� ������ ���������� ������� ����� ��� ��������, ��� ��� ��� � ���� ������������ � ����������.

��������� �������� ���������� ������� ����������� ��� ������ ���-������� � ������ ��� ���������� ���� � �� ������ �����:

  • ��������� �������� �������;
  • �������� ������;
  • �������������� ����;
  • �������.

��������� ���������� � ������� ��������� �������� float �� ��������� left ��� right . �� ��������� ��������� ��� ��������� �� ���������������, �� ���� ��� �� �����-���� �������� ���������� ������� ����, ������� ������������ �������� none . �� ���. 3.32 ������� ��������� ���������� ������ �������� �� ����������� ����� � �������.

�. ��������� ��� ��� float: none

�. ��� �������� ����������� float: left

�. ��� �������� ����������� float: right

���. 3.32. ��������� �������� �������

��� HTML-��� ������� ����������� ���������� � ������� � ������� 3.21.

������ 3.21. ������������� float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

� ������ ������� �������� ���������� �������� float �� ��������� left � ���� . ��� �������� ����������� ������� �� ������ ���� �������� ��� ������� ���������� ��������, � ��� ��������� ��������, ����� ������, �������� ��� �� ������ �������. �������� right , ��������, ����������� ������� �� ������� ���� �������� ��� ������� ���������� ��������, � ��� ��������� ��������, ����� ������, �������� ��� �� ����� �������.

����, � ������������� �����������. ������� �������� ������ 3.21, ����� ������� ����� ������������ � �������. ����� ������� � ������ ������ ������ �� ����������� � �� ������ ������ �����. ��� ����� � ���� ����������� ����� � ������ fig , � �������� ����������� �������� margin , ��� ������������ ���������� ���� ������ �� ������ ������� ����������� (������ 3.22).

������ 3.22. ��������� ��������

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

��������� ������� ������� �� ���. 3.33.

���. 3.33. ������� � ������������� �� ������ ���� � ���������� �� �������

�������� ������

������� ���������� ���� � ��������� � �������, ������� ������������ � �������� �����. ������ ������ ������������� �� ������ ��� ������� ���� ���������� �����, � �������� ����� �������� � � ������ ������ (���. 3.34).

���. 3.34. ��� ������

����� ������ ���������� � ������, � �� ������ ������������� ������� ���� � ��������� �����. �� ������ ���� ������ ���������� ���������� ���� ������ ��������� ������� ��������, ������� ��� ��� �������� ������ ����������� ��������� ����������� (������ 3.23).

������ 3.23. ���������� ������

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

��� �������� ������ ������� ����������� ��������� � ������ � ������� �������� width . ����� ������ ���� �������� ������� ����, ��� ��� ���������.

������������ ����� �� �����������

�� ��������� ������� �������� ������������� �� ��������� ���� ��� ������, �� ��� ������ �������� float �� ����� ��������� ������������� ����� �� �����������. ��� ���� ��������� ���������� ������ ���� � ������ ��� ��� float . ���� ������ �� �������, ��� ����� ����� ����������� ���� � ������ ����� � ������. � ������� 3.24 ���� ������� �������, ��������� � ���������� ������� � ������� �������-������� ���������, � ��������� ��� ������������� float . ����� ����� ���� �������, ��� ���-�������� ���������� �����.

������ 3.24. ����� �� �����������

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

��������� ������� ������� �� ���. 3.35.

���. 3.35. ������������ ����� ��� ������������� �������� float

��-�� ������� ������ � ������� ������ ������ ����� ���������� ������, ��-�� ���� ��������� ����� ����������� �� ������ � �� ��������� �� ������ ������. ����� ����� ������ ��������� ������ ���� ������ ����� �������� height , �������� 100px ��� ������� � ������������� display : inline-block .

Читайте также:  App permissions как отключить

������� ���������

�������� float ����� ����������� �� �������� ��������� ��������� ����� ��� ������������, � ������� ���������� �����. ������� ����������� � ���, ��� float ��������� �� ��� ����������� ��������, ��������� �� ����������� � ���������. ���������� ��� �� ������� 3.25, ��� �������� �������� ������� �� ����� ������ � �������������� �������� left � right �������� float .

������ 3.25. ������� ���������

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

���� ��� ������ � ������� ������������ ������ ������� ��������, ������� ������ ������������� �� ������ �������, ������� float ���������� ����������� ����� ����, ��������� �� �������� � ���� ��������� (���. 3.36). ����� �� ������������ ���� ���� � ���� arrow ��-�� ����, ��� ��������� �������� �� ��������� � ������ ���������, �� ����, ��� ���������� ����, ��� ���� arrow �������� ������.

���. 3.36. ������� ��������� �� ����������� �����

��������� �������� �� ��������� ������� �� ������ �����, � ������� ��� ���������. ����� ��� ����������, ���������� ������� ���� ������ � ��������� ������ ��������� ������� � ������� (������ 3.26).

������ 3.26. ������ �����

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

������� �� ��������� ����������� �� ������ ���� � ������� �� ��� ������� (���. 3.37).

���. 3.37. ������ ���� � ��������� ���������

��� ��� ����������� ��������� ��������� ����� ������� �������� ���������� ����������� �� ����� ���-��������, �������� � ������� �������� ������������� ����. �������� ������ �������� ��������� ���������� � ��� � ������ ������ �������� ���������. ��� ����� ���� ��������� ��������.

������ ���������

��������� ��� ������ ���������� ������, ����������� ��� ������������ � �������������� ���������. ������ ����� ������� ���� ���������� ��� ���������, ��������� ����������, ��� �������� �������� ��������� float �������� �� ���� ����� �����. ���� ��� �� ������ ��������� � ������� ������ �������. ���������� ������ �������� ����������.

������ ��������

���� ��������� ������� ����� �������� ��� ��������� ������, �� ��������� ��������, ��������� �� ���, ����� ���������� � ����� ������. ��� ����� ���� �������� �������� width �� ��������� 100%. ���, ����� � ������� 3.25 ����� ��������� ��������� �������:

������ ���� �� �������� ������ �������� ������ 50% � � ����� ��� ���� 100% ������, ������� �����, ������ ����� ���� arrow , ������� � ����� ������.

���� ����� ����������� �����, ��������� ������ ������ ��������� � ������������, � ���� �� �� �� ������ �������� � ������� ���� � ��� �����.

������������� overflow

�������� overflow ��������� ������������ ���������� �������� ��������, ���� ��� ������� �� ���������� � ������� �� ������� �������� ��������. �������� auto � ���������, ��������� ������ ��������� ��� �������������, � hidden ���������� ������ ������� ������ ��������, ��������� ��������. ����� �����, ������������� overflow �� ��������� auto , scroll ��� hidden �������� �������� float . ����� ��� ������� 3.25 ����������� ����� ����� �������:

��������� ����� ���������� �������� overflow ����� �������� (���. 3.38).

���. 3.38. ������� �������� overflow �� ���

���������� ����������� ������ 3.26:

��������� ������� �� ���. 3.39.

���. 3.39. ������� �������� overflow �� �������

overflow ���� �� ����� ���������� ������� ���������� � ������ float . �� ������ ��������� ��������, ����� ���������� ����� ������ �����������. ��� ���������� � ��� �������, ����� ������� ������� �� ������� ��������, ��� ���� �� ����� ��������. � ������� 3.27 �������� ���������� ����� �� ������ ��������� ���������.

������ 3.27. ��������� ������� ��������

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

��������� ������� ������� �� ���. 3.40.

���. 3.40. ��������� ��������

� IE6 ����� �������� ������ ��� ������������� �������� hasLayout . ����� ��� ��������, ����� �������� zoom : 1 ������ �� ��������� overflow .

�������� clear

��� ������ �������� float ����������� �������� clear �� ���������� ����������.

  • left � �������� ��������� � ������ ���� �������� ( float : left ). ��� ���� ��� ������ �������� �� ���� ������� ����� ������� ����, � ������������� ��� ������� ���������.
  • right � �������� ��������� � ������ ������� �������� ( float : right ).
  • both � �������� ��������� �������� ������������ � ������� � ������ ����. ��� �������� ������������� �������������, ����� ��������� �������� ��������� ��������, �� ���������� ����� � ����� �������.
Читайте также:  Update checker что это за программа

����� �������� �������� ���������, �������� clear ���� ��������� � ��������, ������� ����� ����������. ������ ������ ������������� �����, � �������, clear � ��������� ������ ���

������ 3.28. ������������� clear

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

� ������ ������� ��� ������ clear ����������� �������� clear �� ��������� both . ���� ��� ��������� ������������ ������ ��������, �� ����� ������ ��������� ������� � ��������� �� �� �������������.

���� ����� ����� �������� ����� �� ����� ���������� � ������ � ���� �������� � ���������������. �� ����� �� ������ ��������� ����������, � ������� ������������� clear ��� ����. ��� ����������, ����� � ���� ����������� ������������ ��������� ������ ��������� ���������. ���, � ������� 3.29 � ������� float ��������� ��� �������, � � ������ ������� float ������������� ����������.

������ 3.29. ������������� float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

��������� ������� ������� �� ���. 3.41. �������� clear ��������� �� ������ �� ����� photo , �� � �� ����� col1 , �.�. �� ��� �������� ����, � ������� ����������� float . ������� ������ ������ ���������� �� ����� �� ����� ����������, � ����� ���������� ����� �������.

���. 3.41. ������ � ������������ ������

� �������� ��������� �������� ���������� ������ �������. ���, ���������� ����� �������� � ��������� � overflow � ������� clearleft . ������� ��������� ��������� ���.

������������� :after

������ ��������� ������� ����

����� ������ �������� ������ �������� �� �����, �� � ����� ������ ���������� �� ������������ ����� visibility , �� ���� ������ �������, ����� ��� ���� �������� �����-�� ������ � ������ �� ����������� ��������. ������� ��������� ����� ��� ���������� ���������� � ������� ������� � ������ ��� ������� ������.

��������� �����, ������������ ����� ������������� :after , ������������� ����� ��������, �� � �������� �������� �����������

������ 3.30. ������������� :after

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

������� IE �� ������������ :after �� ������ 7.0 ������������, ������� ���������� ������ � ���� ������� �������� �� �����. ���������� zoom : 1 � ���������� �������� �������� ��������� � IE.

�������� ����������� ������ ����������� � ������������� ������ clearleft , ������� ��� ������������� ����������� � ������ ����. ����� ����� ������ �������������� ������, ����� � ������� ����� ����������� ������� ���������� clear .

Свойство clear используется для контроля поплавков. Сравните эти два примера:

Я чувствую, что я плыву!

В этом случае элемент section находится после элемента div .Но поскольку div "всплывает слева", то случится следующее: текст непосредственно из section будет "омывать" div и сместится вправо, а section окружит все вокруг. Что делать, если мы хотим, что бы раздел section оказался внизу, под всплавающим элементом?

Я чувствую, что я плыву!

Использовав clear мы сейчас сдвинули эту секцию вниз под всплывающий div . Вы можете использовать значение left для очистки всплывающих элементов слева. Также вы можете использовать значения right и both .

��� ���������� ������������� float ������������ � ������ ���������� ������, ����������� ��� ������������ � �������������� ���������. ������ ����� ������� ���� ���������� ��� ���������, ��������� ����������, ��� �������� �������� ��������� float �������� �� ���� ����� �����. ���� ��� �� ������ ��������� � ������� ������ �������. ���������� ��������� �������� ����������.

Читайте также:  Телевизор lg вертикальные полосы на экране

������ ���������

���� ���������� �������� ����� �������� ��� ��������� ������, �� ��������� ��������, ��������� �� ����, ����� ���������� � ����� ������. ��� ����� ��������� ������ ��������� ������ ��������� 100%. � ������� 1 �������� �������� ������� �� ����� ������.

������ 1. ������������� width

������ ���� �� �������� ������ �������� ������ 50% � � ����� ��� ���� 100% ������, ������� �����, ������ ����� arrow , ���������� � ����� ������.

������ ����� ����������� �����, ��������� �� ������ ����� ���� ������� ������ ���������, � ���� �� ����� �� ������ �������� � ������� ����� � ��� ����� (���. 1).

���. 1. ��� ������� �������

������������� overflow

�������� overflow ��������� ������������ ����������� �����, ���� ��� ������� �� ���������� � ������� �� ������� �������� ��������. �������� auto , � ���������, ��������� ������ ��������� ��� �������������, � hidden ���������� ������ ������� ������ ��������, ��������� ��������. ����� �����, ������������� overflow �� ��������� auto , scroll ��� hidden �������� �������� float (������ 2).

������ 2. ���������� overflow

��������� ����� ���������� �������� overflow ����� �������� (���. 2).

���. 2. ������� �������� overflow �� ���

overflow � ���� �� ����� ���������� �������, ���������� � ������ �� ��������� float . �� ������ ��������� ��������, ����� ���������� ����� ������ �����������. ��� ���������� � ��� �������, ����� ������� ������� �� ������� �����, ��� ���� �� ����� ��������. � ������� 3 �������� ���������� ����� �� ������ ��������� ���������.

������ 3. ��������� ������� ��������

��������� ������� ������� �� ���. 3.

���. 3. ��������� ��������

�������� clear

��� ������ �������� float �� ������������ �������� ����������� �������� clear �� ���������� ����������:

  • left � �������� �������� �������� left � float ;
  • right � �������� �������� �������� right � float ;
  • both � ������������ �������� �������� �������� left � right � float . ��� �������� ������������� �������������, ����� ��������� �������� ��������� ��������, �� ���������� ����� � ����� �������.

����� �������� �������� ���������, �������� clear ���� ��������� � ��������, ������� ����� �������� � float . ������ ������ ������������� �����, � �������, clearfix � ��������� ������

������ 4. ������������� clear

� ������ ������� ��� ������ clearfix ����������� �������� clear �� ��������� both .

������������� clear �������� ����� �� ����� ���������� � ������ � ���� �������� � ���������������. �� ������ ��������� ����������, � ������� ������������� clear ��� ����. ��� ����������, ����� � ���� ����������� ������������ ��������� ������ ���������� ���������. ���, � ������� 5 � ������� float ��������� ��� �������, � � ������ ������� float ������������� ����������.

������ 5. ������������� clear

��������� ������� ������� �� ���. 4. �������� clear ��������� �� ������ �� ����� photo , �� � �� ����� col1 , �. �. �� ��� �������� ����, � ������� ����������� float . ������� ������ ������ ���������� �� ����� �� ����� ����������, � ����� ���������� ����� �������.

���. 4. ������ � ������������ ������

� �������� ��������� �������� ���������� ������ �������. ���, ���������� ����� �������� � ��������� � overflow � ������� clearfix . ������� ��������� ��������� ���.

������������� ::after

������ ��������� ������� ��������

������ �������� block � display ������ ��������� �������� table , �� ����� ��� �� ������, ��� �� ��� � ����� ������ ��������� �������. �� ������ � ������� ��������� ����, ������� ����� �������� �������� float � ����������� ���������.

��������� �����, ������������ ����� ������������� ::after , ������������� ����� ����������� ��������, �� � �������� �������� �����������

������ 6. ������������� ::after

�������� ����������� ������ ����������� � ������������� ������ clearfix , ������� ��� ������������� ����������� � ������ ��������.

Комментировать
218 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
Adblock
detector