clear в CSS


Содержание

CSS �������� clear

�������� clear �������������, ������ �� ������� ���������� ����� � ���������� ���������� ��� �� ���� ��������� ��������� (clear).

����� ��������� �������� clear � ��������� � ����������� ���������. ����� ������ �������� — none, left, right � both. «None» — �������� �� ���������. �������� ��������� ��������� �������� � ����� ������. �������� «left» ��������� ��������� �������� � ����� �������. �������� «right» ��������� ��������� �������� � ������ �������. �������� «both» ��������� ��������� �������� � ����� � ������ �������.

CSS �������� clear

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

CSS ���������

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

�������� ��������
none �������� �� ���������. ��������� ��������� �������� � ����� ������.
left ��������� ��������� �������� � ����� �������.
right ��������� ��������� �������� � ������ �������
both ��������� ��������� �������� � ����� ������
initial ������������� �������� �� ���������.
inherit �������� ����������� �� ������������� ��������.

������

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

��� ������� ������ �� ��������� ��������� � ������� �������� CSS clear.

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

��� ���������? ������� �������, ������� ��������� ��� ��������� �� ��������� float:left ������ �������� ������, �� �����, �� ������� �� ������ ��� �� ��������� ���� �� �� ���� �������� img �� ��������� float left.

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

����� ������ ��� �������� ����� ��������� ������ �� ��������� ��� ����� div, ������� ��������� � ����� ����.

�������.

� CSS ������ ��� �������� �������� ������, ����� ������������ �������� clear. ���� �������� ��� �������� ��������, �� ��������� ���������� ���������� ���������, ������� ��������� �������� float.

��������� ����� �������� ���������:

none � ������ �� ��������� �����������

left � ������ ��������� �� ����� �������


right � ������ ��������� �� ������ ������� �������

both � ������ �� ��������� �� ����� ��������

inherit � �������� ����������� �� ������������� ��������

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

��� ������, ������ ���� ����� �� ���� ����� � ������ �� ������������ �������� �������� float:left ��� �������� img.

�������� clear ���������� �������� ����� ������������ �� ��������, ����� �� ���-�������� ������������ ��������� �������� � ������� �������� float. ����������� ��� ����� �������� ��������� ������� ��������� �� ����������� ������ ��� ������� ���-�������.

Float � clear � CSS �������� ��� ��������� ��������� ��� ������� �������

������������, ��������� �������� ����� Goldbusinessnet.com! ����� ������ ������������� �������� � ����� ���������� ���� �������� CSS � ����������� ������ ����� ��������� �������� ��������� ��������� ����������� float, �� ������������ �������� ���������� �������� ������� ������� ����� �� ��������� clear ��� �������� ������� � ��������������� ����.

��� �������������, �����, ���������� ����� ��� ������ ������������ � ������� ����������� �� ��������� �������� ������. �������, ��� ��� ������ �� ������ ���� ��������� � ������� �������� CSS�, � ������� �� ������� ���������� ����������� ����������.

��������� �������� ����������� ����� � HTML ��� ������������� ������� ��������� ��� �� ����������� ������� (������� align ���� img � ����������� left � right). ��� ��� ���� ������ ������ ��������� ��� ���������� ���������� ����������.

�� ���������� ����������� ���������� �������� �������� ������� float (left, right, none) � clear � ��� ����� ������������� � ����� DIV � SPAN, ������� �������� ������� ��� ������� �������. �������, �� ����������� ����� ����������� ����������� ���������� ��� �������� ����� ������������� CMS (� ���������, WordPress). ������, ��������, ��� ������ ����� ������ � ����� �������������� �������� �������� ��� ������ ������ � ����������.

��� ��������� ��������� �������� � CSS � ������� float

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

����� �� ����� ������������ ��������, � �������, CSS position (relative, absolute, fixed), � ������� ��������� ������ �������� �� ����������� ������. �� � ������ ���������, ����������� �������� ������� ������������ ����������� ������������, ��� ��� � ������ ������� float.

������ �� ������ �������� (propety) CSS � ��� ��������� ����� ���������� �� �������� ������������ W3C, ��� ���� ����������� ���������� (������ �� ������ ������ ������ ������, �� ��� ����������� � ��� CSS3, ������� ��� ��������� ����������, ���� �� ����� �� ����������):

��� ������, float ����� ��������� ���� �� ���� ��������� ���������� (left, right, none) � ��������� �������� �������� (inherit). �������� float none ����������� �� ��������� � ��������, ��� �������� ����� ������������ � �������, ��������������� �������� ������. � ��� right ��� left ��������� ��������� ��������� ����� �� ��������� ������ ��� ����� ��������������.

���� �������, �������� ����� ������������ HTML ���� ������� �� �������� � �������, ������� ����� ���� ��-������� (������, ��� ����������� ���� ��������� ����������� ���������� CSS � ������� �������� Display). ������� �������� ��� ��������� ������, ���� �� ������� �������� width. ������ ������������ ����������, ����� �������� height �� ��������.

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

��� ����������� ��������� ������� CSS � ������� ���������� ������ �������� STYLE (����� ����� �� �������� ������ ����� �����������, �� �� ����� ������ ��� ������������).

� ���, ����� ��������� � ������������ ���� ����������, ������� ��� �������� ����, �������� ��� ��� �������� width � height, � ����� ���� ������� ���. � ����� ����������� ����������� ������� �������� ������� ��� ������� ����� � ������� background (���������� ����� ������������ background-color):


�������������� �������� ����� ���������:

��� ������, �� �������� ������������ �������������, ��� ��������� ������ (height:50px) � ������ (width:450px) �� �������� � ������� �������� ��� ���� SPAN, ������� �������� ��������. ����� ��������� ��������� �������� float right ��� ������� ��������� ����������� � float left ��� �������:

� ����� ��������:

���������� ��������, ��� � ���� ������ ������ � ������ ����������� ���������� ���������� (���� ��������� �� ����� �����, ������ ������). ������������� ��� ��������� ������ � ������, ������� ��������� � CSS ������.

����� ����, �����������, ������������ �������� ����� SPAN, �� ������� ����� ����������������� � �������� ����������� DIV. ���� ����� ������, ������, ������� width �� ������ ����� ����� SPAN, �� �� ������ ����� ������������ ����������� (� ����� ������ ������ ������ � ��������� ���������):

������ ���������� ����� DIV �������� �������� ������ ���������� � float: left. ���� ����� ����� �������� ������������ � ������������ ���������� ������������ ��������� �� ���� �����������, ��� �� ������ ���� ����������� ������ ������� ��������� � �����������, ��� ������� ���� ����� �� ��������� ���� � �����:

�����������, ��������� ��������� �����������, ������� ����� ������� ���������� � ��� ��� ���� ��������� �������� float (right ��� left):

  • ������� ��������� � ������ ��� ������� ����;
  • �� ���������� ������� ��� ����������� �� ����, ����� �� ��� �� �����;
  • ����� ���� ����� �������, ��� ����� �������� ������� ������������ (� �������� display:block) �� ����������. � ���� �� ������ ���������, ���� ��� ����� ��������� �� ��������� ������� ������� ������;
  • � �� �� ����� �������� ���� (display:inline) ����� �������� ��������� �����. ���� ����� ���������� �� ���������� ��������, �� ��������, ��� ���������� DIV ���������� («������� �������») �������� SPAN � float:left ������.
  • ���� ���� �� ��������� ������ ���������� ����� (� ����� ������� width:450px), �� ��� ����� ���������� ��� ����������;

� ������ ������� �� ����������� �������� ����� ��������� ������ � ������� ����������� �������� float � ������� ��� ���������� ������ � ��������, � ������� ����������� (� ���������� ���������� Display). � �������� ����������� ��������� ����������� ���������� ������������� ���������� �� �.������:

����� ������� ������� ��������������� ���� ����������� CSS (float)

����� �������� ������ ���������� ������� �� �������� ��������������� ���� � ������� ��������� ������, ������� ������ ����� ������������ ��� ���������� ���������. ������� ������������� ������������� ������ HTML ����������� ���� UL, ��� �������� ����� ��������� ���:

������� �������� ���������:

������ ������� �������������� ���������� ���� � ������� CSS �������: ������ ������� �������� ������� �� ������ ��� ������ list-style none, ����������� �������� ���� ����������� � �������, �������� � ��� ������� display block, � ����� ��� ������������ �������� ������ �� ��� �������� ���.

����� �������� ����� ������ ������� margin, ����� ��� ����� �������� ������, ������� ��������� ������ ���� ���� �� �����. ��� ���������� ����� WordPress ����� ������ ���� UL class «menu», ��� �������� ������� ����������� ����� � ����� STYLE.CSS:

� ������ ������ � ��������� �� ��������� ������� STYLE, ��������� � ���� ������ �������� ��������� ��� ��������� ���� � �� �� CSS �������� ��� ������� ���� LI. � ���������� ����� �������� ���� ���������� ����� ���:

������� � ���������� ��������� �����������, �� ������ ��? ������ �� �������� ��������, ������� ������� ������ ���������� ������������ ����. ������, ������ � ��� ����������� �� �������������, � �����������. ��� ������� ������� ������ ����� �������� ��� �������� HTML ������ LI �������� float left, ��������� ������� CSS ��� ���� ������ �����:

� ����� ������� ������������ � �������������� �������:

�����, �� ��������� ���� ��������������� ���������� ��� ������� �������, �� ������� ��������� ����� �����������. ������ ���������� ���� � float left ������������� �� ������������ ����������, ��� ������� � �������� ������ �����, ����������� ����������� �����-�����. ��� � ��������� � ������ ������ 1�, ������� ������������ ��������������� �������.


������ 2� ����� ������������ ������, �� ���������� ��� ����������� ������������� ������ ������������ ����. � ��� �����. � ���������� �� �������� �������������� ���������������� ������� ���� ������������ �������. �� ������ ���� ���������� ����� ��� ������. ������ ��������� ������������� ����� ��������� ������ ������� ���������:

� ��� ������, ���� ��������� ������� �� ������� ����� ������, �� �������� �� ��������� �������� ������� ����� � ���� ���� � ��������� � ������� ����� ���������. �� �������� ����� ������ ���, ��� �������� ���� ��� ����� ������ ����� ��������� ����� ������� � �� ���������� � ����������� �������. ���� ��� ����� ������ �����, �� ��� ���� ����� ��������� ���:

� ���� ������ ������ 4� ��������� ������� ������� �������� ������ ������������� ������� � ������ ����� ��������� � ������� ����� ���������, ������ ���������� �� ����� ������ ����������. ����� ������, ������, �������� ������, �������� �������, �� �������� ���������� �� ���������:

����� ������ 3� ����� ����������� ���� ��������� �� ������ ������� ���������� ����������� � ������� ���� � ������ ����� �������� �����. ��� ��������� ���� ������������ ������ ������ ��� ��������� ���� ����������� float �� ������������ ������������ ��������.

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

������ ���������� �������� clear (both, left, right)

������ ���������, ��� ������������ �� ���� ����� ����������� ��������� ���������, �� ������������ ��������� ���� ��������� ����� �� ����������� ��������� �� ��������� � �������. ����� ����� �������� � ������� ������� clear. ����� �� ��� ���������� ����� �������� �� �������������� (����������� W3C):

������� CSS clear ����� ������ ��������� ��������, ������ property none �������� ���������� �� ���������, ��� ������ �����������, ��������� � ���� ������ �������������� ����������� ����� ����. ����� clear (none, left, right, both) ����������� �� ������������� ���� (inherit).

���� ����� �������, ������������ ��� ������������� �����, ����������� � ������ �������� � ����������� �� ��� ��������:

  • none — �������� �������� ������ �������� clear, � ���������� ���������� ���� (��������, �����) �������� ���������� � ������������ � ��������� ��� ������� � ���� float;
  • left � right — ����������� ��������� �������������� � ������ ���� ������� ����;
  • both — ������������ ��������� ������������ ������ � �����. ��� ����� ���������������� �������� clear � ������������ �������������.

������ �� �������? ������ � ���� �� �������� ����������� �����? ������, ����� ����, ��� �������� �������� ������, �����, ��� ������� �� ���� �����. ��� ����� �������� ������: ����������� ��� ����� ������������� ����� ���� � ������, � ����� ����������� ����� �����. ����� ����������� �������� ����� ����������� ��� �������.

����, ������� ��� ���������� DIV, ������� ������������ ����� ������������ �� ���� 2 �������. �������� ��� ��� CSS ��������, ������� ������������� ������ (width), ���� ���� � ��������� �� � ��������� � ������� float left. ������� � ��� �����, ����������� � ��� P, �������, ��� ��������, �������� ��������:

����� DIV ���������� � �������������� ���, ������ ������ ������ ������� ����� ���������, ��������� ��� ��������. � ������ ������������ � ��� ������� ���� (��� ���� ��� ����� ������������ �����), ������ �� �������� ���������� ������ ���. � ��� ����� ��������� ���� ���, ��� ��� ����� ������ ��������� ��� �������:

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

����� �� ������ ���� ���������� ��� �����, ��� ������� ���� ��� ��������, ������������ �����-�������� ������� ���������. ����� ��������� ��������� ����������, ������� ��������� �� ���������� CSS � �������� ������ ��� ��� ��������� ����. � ����� ������� ������������� ������ DIV � �������� CSS clear both, ����� ��������� ��������� ����������� ������� ����� (�������) ������� ������ � �����:

�������� ��������, ��� � ������ �������� ���� � ������� ������� margin:0 auto, � ������� �������� ����� ��������� ��������� �� ������. �������������� ��� ����� �������:

������ ���� ������ ������, ��������� ���� ������������� ������������ ��������: ��� ������� ����������� � �������������� ����, � ���������� ���� �������� � ���� ����������� (�����) ����� ������ ���������� �� ����� �������� ����� ��� ���������.

��� ���������� ������ ������������ ������� ����������� ����� ���������� � ������� ���� (��� ���� ���������� �������������� ���������), � ��� �� ������ ���������, ������� �� ��������������� ����������� � �������� ������� �������. � �������� ���������� ���������� ����� �� ������� ������, ��� ������ ������ �������� ����������� � ����������� float � clear (������� ���������):

��������� ���������� ����������� float � clear � CSS � ����������� ������� �������


����������� ���, ��������� �������� ����� webcodius.ru. ������� �� ��������� ������� CSS � ���������� ������� float � clear, ������� ������ �������� ��� ������� ������� ������.

�������� ��������� ����������� ��� ������ float

���������� �������� ���-�������� ������������� �� ��� ���� �� ������, � ��� �������, � ������� ���������� � html-����. �������� � ���� ���� �������, ����������, ������� � ��. �� �������� �� ����� �� � ��� �� �������. �� ��� ������ ��������� ��������� css �� ����� �������� ���� �������. ���� �� ��� float.

������� float ��������� ��� ��������� ��� ���������� ��������� ��������. �� ���� �� ����� ���������� ��� �������� �������� ������������ �� ������ ��� ������� ���� ������������� �������� (�������� ����������, � ������� �� ������, ��� ����� Web-��������). ��� ���� ������� ������� ����� ����������� � ���������������� ���� ��������, � ��������� ���������� ����� �������� ��� � ��������������� �������. �������� �� ��� ������ � ������ html, ����� ������������� ������� align �� ���������� left � right ��� ���� img, ������� ������������ ��� ������� �������� �� ���-��������.

� ����� ������� ����� ���� ��� ��������� ��������:

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

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

���������� ��� ������� ��������. ��� ������ ������ ��������� �� ����� ��������� ������ � ������� ������� background:

��� ��� ����� ���� � ������� ������:

� ������ ��� ������� div-� ������� �������� ������� float �� ��������� left, � ������� ��� ������� � ������� �������� margin ��� ����������� ��� �������������� � �������� �����:

��� �����, ������ div ���� ������������� �� ������ ����, � ���������� ��������� �������� ���� �������� ��� �� ������ �������.

��� ���������� ������� float � �������� ���������, ��������� �������� ����� ���� ��� ������� ��� �������������� � ������� ���������� web-�������. ���, ��������, � ������� ��������� ������� height � width ��� �������� ��������� �������� �� �����. �� ����� ���������� �������� float, ��������� �������� ����� �������� ����� ��������.

������� � ����������� ������� ������� ������� span � � ������ �������� ��� ���� �������:

���������� ��������� �������� span

�� ������� �����, ��� ������� width � height ��� span-� �� ��������� � ��� ������� ����� ����� � ������������ � ��� ����������.

������ ������� �������� span ������� float �� ��������� left:

���������� ��������� �������� span

������ ������� span �������� ������� � ������������ � ��������� css, � �������� �������� ����� �������� ��� � ������ �������. �� ����� ����� ������� �����, ��� ������� float ����� ��������� ��� � ��������, ��� � � ������� ���������. ������ �� �������� �� ���� � ������ �������� ����������� �������, �� ���������� �������.

� ��� ���� ������ ���������� �������� �������� ����� float ��� ���������� ��������� ���� �� ������ ���������? ������� ���������:

���������� ��������� �������� span


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

�������� ��������, ��� ������� float ����������� ��� ������� �������, ���������� �� ��������� �����������. ��� ���������� ������ ������� ����� ���������� �������� �����-���� �������� ���� ���, ��� ���� ��������� �� ������ ��� ������� ����. ���� ������ ������ � ��� ������� ����� float ��� ������ ��� ���� �������� none, ��������� ����� ���������������. � ���� ������ �� ������ �������� ������� clear.

������� Clear

������� ����� clear ������������� ����������� ���������� �������, ��� ������ ������� ������� � ����� ������ ������ ������������� ���� ��������� �����������. ������� ������� ���� ��� �������� ������ ��������� � ������� �������� float, �� clear �������� ��� �������� ��� ��������� ������. �� ����� ��������� ��������� ��������:

��� clear ������ left ������� ������������� ���� ���� ���������, ��� ������� � �������� float ������ �������� left. ���� clear ����� right, �� ���������� ��������� �� ������ �������. � both �������� ��������� �� ����� �������� ��������. �������� none �������� �������� ������� clear � ��� �������� �� ���������.

������� � ���������� �������, ��� ������� ����� div ������� clear:left:

���������� ��������� �������� span

� ������� ����� ������� �� ��������� ���� div ��������������� ��������� ������� ����� �� ����.

������� ������� � �������� ����������� ������ � ������� float

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

�������� �� ����� ������� �������������� ����� � ������ � �������� ��������. � ����� ����� � ��� ����� ����, � ������ �������� ���������� �����. ��� ������ �������� � html-���� ��������������� �����:

���� �� �����������.

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

������� ������ ���������� ���:

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

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

���������� ������ ��������� �����:

��� ����� ��������. � 2010 ���.
���� �� �����������.

����, �� �������� � ��������� ����� ����� ( . � ��� ��� ���� html-��� ����� ������������ � ��������:


��� ����� �� �������, ����� ����������� �� ������� ������ ����. ����� �������, ������ �������� css ����� ��� ��� (������� ��� ����� leftbar ������� float, ��������� ������ leftbar-� � content-a � ������� ��� ��� ������):

.clr <
clear:both;
>
#leftbar <
float:left;
width:250px;
background:#E6EDF1;
>
#content <
width:750px;
background:#fff;
>
#footer <
background:#314451;
color:#fff;
text-align:center;
>

� �������, ��� ����������:

�����, ��� ��������� ������� float:left ���� leftbar ���� ������� � ���������� ����� content ��� �� �������� ���. ��� ����, ����� ����� �� ����������� ������� ��� ����� content ������� ������ � ������� ������� margin-left �� 10 �������� ������ ��� ������ ����� leftbar:

#content <
width:750px;
background:#fff;
margin-left:260px;
>

� ����� �������� ����-���������� ����� �����.

����, �������� �����. � ������ ������ �� ����������� ��� css ��������, ������� ����� � ������ ������� �������:

  1. float � � ������� ���� ��������� ��������� �������� � ���������� ����������� ����������� ����� ����� ���� � ������;
  2. clear � �������� �������� float ��� �������� � ���������� ������� ���������.

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

������������ ��� .clearfix

.clearfix � ������� ��� ��������� ����������� �������������, ��� ������������� ������������ ��������� � ����������� ������ �������� ������ � float �������. ���� ����������� ������ �������� ������ ������ � �� ����� ����������� � �� ����� �������. ���� �� �������� ������ ������, ��� .clearfix ������ � � ��� ��������, �� ��� ������������� �� ������ ���������, � ������ � ����������, �� �����-�� ������� ����� ���������� ���������� ������, ��� ������ �������� ��������� � ����������� ����������������� �������, � ���� ����� ������� ��� ���������� ����� ��������� � ���������.

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

� ������� LI ����� �������� float: left; �, ��� � ��������� �������, ������������� � ��� ���� �� ������ � «�����-�� �����» ������������ ������. ��� ��, ��� ������������ ��������� float. �� ������� ��������� �� ��������, ���� � ��� ��� ���� UL: ���� �� ����� ��? ��� �� float �� �������, � �� ��������� ��� ������� �������, ������ �� ����� ���� ��� ��������?

� ��������� ���������: ��� ����������� float-��������� �� �������� ������� ��� �� «�������� �� �� ������ ������», �������� � ������ �����, ��������� ���� ���������� ��������� ������� � ������� ����������. ������ ��� ���������� ��������� ���� ������� �������� clear, ����� ��������� ��� � ������ ������� ���������� �����.

��� �� ����������, ���� ��� ������������� ����� ��������� clear: both;? ������ ������ ������, ����, ��� � ��� ������� �����, float �������� �� �� ������� � �������������� ��� ����� �� ��������, ��� ��� �� ������ ���, ��� ���������� ���� «������� �� ������».

������� ���������� ��� � ���� ��������� .clearfix:

� ������� .clearfix ���������. ��� �� �� ��� ������? �� ��������� ����� ���������� �������� �������������, ������� ������� ��� float ��������, ������������� ����. ���� ������ ������, ��� ������������ ������� � ������ ������, ��� ����� ���, � ������� :after �������� ������� ��������� � ����� ������, � �������� ���������� ������������, ����� �� ��� �������� �������� ����������, ����� ������������.

� ��� ������� ��� ������������� .clearfix:

�������� display: inline-block; ��� ������������� ��������. ��������� ����� ��, ������� ���� � ���, ��� .clearfix ��������� ������������ ������� �������, ���� �����, ����� �� ��� ��������� �����. ��� ���� ��������������� � ������� ����. � ��� ������������ ������� ��� ������� ����������� ����������.


�� ���� ��� ������������ ������� (� �������� ������ ����) ���������, � ������������ ���� ����� ����������� ������ �����, ����� ���������� ��������, ����� .clearfix ������������ ������. ������������ ������� ����� �������� 0 ������ (���������� � �� ��� «������� �� ������»). � ����� ���������������� � ��� ��������� ������ ��������, ����� ����� ���� ����������� ������������� ������ (� ��� ����� ���� ������������), ���� «��������» � position: absolute; (��� ���� �� ������ ����� ������������� �������������� ��������). � ���� �������, �������� � ����� «����» �� ����� �������������� �������, ����� ������������ ������������ ��� ��������� ������� � �������������� ���� «����«.

������������� �������� display �������� ����������� ������� ���������� ���������� (firebug ��� ������� ����������� � �������� ���������� ���������������), ������ �����, ����� .clearfix ��������� �� ����������. ���� ���� �� ������� ��� ��������, �� ������������ ������� ����� ����������� �� ��������� (���� � ���� ��� ��������), � ��� ��� ���������� �� ����� �������� ����� ��� ���������� �������� (��� ������ ������� � ������� 1 ��� ���������������). display: inline-block; ��� ��� � ������� �������� ���� �������.

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

������� ��� ���������� ��� ����� �������.
� clearfix � � �������� div.box �� ����� ������� ������(margin), ������� �������� ��� UL, � inline-block ��� ��������� ��� ����� ��� ������� �� �����.

� ��� ����, ����� ������ inline-block ����� ��� � block ��������� width: calc(100% � 80px) � �� �������� ��� ������� ������� � ���������� ����� ��������� �� ������.

�����: � ����� ������������ � ����� ������ ������� ������� ������ ������. ������, ����� ���� �����, ����������� �� ��������!

������� ��������� ���������: ����� ��������� ������� clearfix

���� ����������: 2014-06-12

�� ������: ������� ��������� ��������� ����� ���� ����� ���������������� �������������� �� �����-��� ����������. �� �����������, ��� � ������� ���������� ���, ��� ���� ������������� ��������� ������, ��������� ��� ������ clearfix. �� ����, ��� �� ��������� � ��������� ������, ������� ��������� �� ���� ��������, ������� ����� clearfix ������� ������.

��������: .el-1 � .el-2 � ��������, ��������� ��� � ��� ������ ����������, � ����� ���� ������� .main ����� �������� .container

�������� ���������: �� �����, ����� .container ����������� �� ������ ����� �������� ��������� (�� ���� �� ������ �������� �� ���� .el-1 � .el-2), � �� �����, ����� ������� .main ��� ����� .container.

�������������� ���������: .container ������������� � �� ����� ������ ������, ��� ����� ������ ������ ���, ��� ������ .main �� ������������� ������� � ������������ ���������� ��������� ������� ����������� � �������, �������� �������� .container.

����������� �� ������������� ��������, ���� �������� ������ ��������� ���-�� ���:

��� ������� ���� ������?

����� ���������� � ������ ���������� �������, ����� ��������� ����� ��������������? ������� �� ���������!

����� ��� CSS ��� ����� ��������� ��� ���:

�������, ��������� ������� �� ���� ����:

����� �� ���� � ��������� �� CSS ��� ��� �������� .container, �� �������, ��� �� � ������� ���������. �� ������ ������� ������� ������ ������� �������, � ��� ���� ������ �� ���� ����. ������, �� �� ����������� ��� ����, ����� �������� .el-1 � .el-2, �������� �������� .main ������������� � ����������� ����� ( � ����� ������ ��� ������� .el-2).

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


�������� ��������� ��������� (��� clearfix) �������� ��������� ������������ ������� �����������, ����� ��������� ������� �������� ��������. ����� �������, ��������� �������� ����� ���� ��� �����������. �� ���������� ���������� ���, ��� ���������� ���� ���� ���������� ��������� ������. ������ ���, �� ��������� � ���� �������, ������� �������������� ���������� CSS �������� clear, ������� �������� �������� ������������ CSS ��� ������� ���� ������.

�������� �clear�

MDN ���������� clear ���:

�������� CSS clear ���������� ������ �������, ������ ����� �� ���������, ���������� ����� ��� ��� ������� ���� (������).

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

������� 1: ��������� ������

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

���� ���� � ����� �������: �������� ������ �������, �������� ������ �������� clear, ���� ����������, ����������� ��������� ��������. ������ ����� ������������� ������������ ������ ��� ���� ���� ���� ���������, ����� �� ����� ��� ������������ � ������ � ����� HTML. ��� ������������ ���������:

�������� CSS clear

img
<
float:left;
clear:both;

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

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

�������� �� ��������� ���
������������ ���
������ CSS CSS 1
��������� JavaScript object.style.clear=»left»

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

�������� clear �������������� ����� ��������� ����������.

�������: �� ���� �� ������ IE (������� IE8) �� ������������ �������� inherit.

clear

�������� CSS clear ������������ ��� ���������� ��������� ��������� (�����������) HTML-��������� (�������� float) ������� �������������� ����������.

��� ��������

�����������: � ������� ���������.


��������

��������� �������� clear �������� ���� �� �������� ���� ����������� �������� ���������.

  • none � ��������� ��������� ����� ����������� ���������.
  • left � ��������� ��������� ���������, ������� ��������� �����.
  • right � ��������� ��������� ���������, ������� ��������� ������.
  • both � ������ ��������� ����� ��������� ���������.
  • inherit � ��������� �������� clear �� ������������� ��������.

���������� ������: �� ����������.

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

���������

������ CSS: ������������� clear

���������. ������������� �������� CSS clear.

������ CSS

������: CSS 1 CSS 2 CSS 2.1 CSS 3
���������: �� �� �� ��

��������

�������: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
������: 6.0 � 7.0 8.0 � ���� 2.0 � ���� 2.0 � ���� 9.2 � ���� 3.1 � ����
���������: �������� �� �� �� �� ��

Internet Explorer 6.0 � 7.0 �� �������� �������� inherit � ��������� ��������� �� ������ ��� ��������, ������� ����� �������� clear , �� � ���� �����������.

clear

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

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

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

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

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

Илон Маск рекомендует:  Плавающая ширина картинки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL