Атрибуты: Параметры расположения блочного элемента.

  Для определения относительного расположения полей элементов блочных тегов в поле родительского элемента на Web-странице применяются атрибуты стилей положения.
  Атрибуты:
  float - Устанавливает расположение поля определяемого элемента в поле "родительского" элемента.

Формат:

  • float:
      left
      |right
      |none

Значения:

  • left – Поле элемента прижимается к левому краю поля "родительского" элемента сразу после предшествующего ему контента, а следующий контент "родительского" элемента "обтекает" поле определяемого элемента справа.
      Если определяемый элемент следует за элементом связанным с таким же значением float и размеры поля определяемого элемента позволяют, то браузер прижмет его поле к правой границе поля предшествующего элемента.
      Для того, чтобы поле (вместе с контентом) определяемого элемента, в таком случае, прижалось к левому краю поля "родительского" элемента ниже поля предыдущего элемента, необходимо связать определяемый элемент с атрибутом стиля clear со значением left.

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

      Если размеры поля элемента, который никак не определен атрибутом float и следует за определяемым элементом, позволяют, то браузер прижмет его контент к левой границе поля определяемого элемента.
      Для того, чтобы поле (вместе с контентом) следующего элемента, в таком случае, разместилось ниже поля определяемого элемента, необходимо связать этот следующий с атрибутом стиля clear со значением right.
  •  nonе – Отменяет унаследованное расположение. То есть, поле элемента последовательно располагается в контенте "родительского" элемента так, как оно определен в HTML-коде.
  Надо иметь в виду, что, в случае если контент "родительского" элемента состоит из элементов "дочерних" тегов, то "обтекает" поле предыдущего элемента, определяемого с атрибутом стиля float, именно контент поля следующего элемента.
  То есть браузер, для заданного "обтекания", должен совместить соответствующий верхний угол (левый или правый) поля элемента с "обтекающим" контентом с соответствующим верхним углом "обтекаемого" поля.
  То есть, к примеру, если для "обтекаемого" поля и поля с "обтекающим" контентом установлены одинаковые внешние отступы (например = 0), то сами эти поля совместятся в общей части, но "обтекающий" контент сдвинется в своём поле, чтобы обеспечить "обтекание".
  Поэтому, если, для элемента с обтекающим "контентом" установлены размеры поля, то этому контенту может не хватить места для соответствующего сдвига.
  Кроме того, невозможность совместить соответствующие части полей из за заданных для них внешних отступов также скажется на эффекте "обтекания".

  Надо также иметь в виду, что "обтекающий" контент может быть размещён только в поле элемента не связанного с атрибутом стиля float со значениями left или right, поскольку в противном случае соответствующее совмещение полей для "обтекания" невозможно.
  clear - Устанавливает расположение поля определяемого элемента в поле "родительского" элемента, когда определяемый элемент следует за элементом связанным с атрибутом стиля float со значениями left или right.

Формат:

  • clear:
      left
      |right
      |both
      |none

Значения:

  • left – Поле элемента должно располагаться ниже поля предшествующих элементов, которые связаны с атрибутом стиля float со значением left.
  •  right – Поле элемента должно располагаться ниже поля предшествующих элементов, которые связаны с атрибутом стиля float со значением right.
  •  both – Поле элемента должно располагаться ниже поля предшествующих элементов, которые связаны с атрибутом стиля float со значением left или right.
  •  none – Отменяет, возможно унаследованное, значение атрибута clear.


Пример:

<STYLE>
  #dvv {width: 600px; height: 790px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #F0FFFF;}
  #dv1 {max-width: 200px; max-height: 200px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #F8F8FF;}
  #dv2 {max-width: 200px; max-height: 200px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #DCDCDC;}
  #dv3 {max-width: 200px; max-height: 200px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #C0C0C0;}
  #dv4 {max-width: 200px; max-height: 200px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #A9A9A9;}
  #dv5 {max-width: 200px; max-height: 200px; border: 2px solid black; overflow: auto; font-size: 12px; background-color: #808080;}
  .field:hover { height: 520px;}
  .field:hover #dvv { height: 500px;}
  .field:hover #dvv #dv1 { background-color: #F8F8FF; border-color: transparent; float: right;}
  .field:hover #dvv #dv2 { background-color: #F8F8FF; border-color: transparent; float: right; clear: right;}
  .field:hover #dvv #dv3 { background-color: #F8F8FF; border-color: transparent; float: right; clear: right;}
  .field:hover #dvv #dv4 { background-color: #F8F8FF; border-color: transparent; float: right; clear: right;}
  .field:hover #dvv #dv5 { background-color: #F8F8FF; border-color: transparent; float: right; clear: right;}
</STYLE>
......

<FIELDSET class="field">
  <DIV ID=dvv>
    Сказки Пушкина стоят особняком в русской литературе.
    <DIV ID=dv1>
      Жил старик со своею старухой у самого синего моря...
    </DIV>
    Непонятно, где и как мог человек, выросший в столичной дворянской семье,
    <DIV ID=dv2>
      Раз он в море закинул невод, пришел невод с одною тиной...
    </DIV>
    набраться того удивительного мироощущения, что очаровывает всех русских людей,
    <DIV ID=dv3>
      Как взмолится золотая рыбка! Голосом молвит человечьим...
    </DIV>
    и уже несколько веков, и, по существу, является фундаментом
    <DIV ID=dv4>
      Отпустил он рыбку золотую, И сказал ей ласковое слово...
    </DIV>
    русского мира и русской духовности.
    <DIV ID=dv5>
      -Александр Сергеевич Пушкин.
      <BR>“Сказка о рыбаке и рыбке...“
    </DIV>
    Очевидно, что трудно объяснить это лишь влиянием Арины Родионовны...
  </DIV>
</FIELDSET>
Пример атрибутов float и clear - наведите мышку.

Сказки Пушкина стоят особняком в русской литературе.
Жил старик со своею старухой у самого синего моря.
Они жили в ветхой землянке ровно тридцать лет и три года.
Старик ловил неводом рыбу, старуха пряла свою пряжу.
Непонятно, где и как мог человек, выросший в столичной дворянской семье,
Раз он в море закинул невод, пришел невод с одною тиной.
Он в другой раз закинул невод, пришел невод с травой морскою.
В третий раз закинул он невод, пришел невод с одною рыбкой,
С непростою рыбкой, — золотою.
набраться того удивительного мироощущения, что очаровывает всех русских людей,
Как взмолится золотая рыбка! Голосом молвит человечьим:
„Отпусти ты, старче, меня в море! Дорогой за себя дам откуп:
Откуплюсь чем только пожелаешь.“
и уже несколько веков, и, по существу, является фундаментом
Отпустил он рыбку золотую, И сказал ей ласковое слово:
„Бог с тобою, золотая рыбка! Твоего мне откупа не надо;
Ступай себе в синее море,Гуляй там себе на просторе.“
русского мира и русской духовности.
-Александр Сергеевич Пушкин.
“Сказка о рыбаке и рыбке...“
Очевидно, что трудно объяснить это лишь влиянием Арины Родионовны. Нет, здесь налицо именно дар Божий и Божье провидение. “Здесь русский дух, здесь Русью пахнет...“ - Ну не правда-ли, что каждый народ в этом мире имеет у Господа свое предназначение? Какие-то предназначены для последовательного собирания умственных и технических достижений. Век от века, по крупицам совершенствуют они свою жизнь стремясь к увеличению комфорта своего существования, не считая равными себе тех, кто не похож в этом на них, и не гнушаясь нарушениями Божьих заповедей в отношении “не себе подобных“. Каким-то установлен порог в развитии. И так и живут они, как жили веками, ничего не привнося в этот мир, не чураясь пользоваться достижениями первых, почитая только свою собственную веру в Бога, и отстаивая свое миропонимание крайней воинственностью. Однако же и те и другие необходимы миру, их предначение понятно, но ведут ли их пути к Богу? Нет ответа. А что же народ мира русского, для чего предназначен он? Вроде бы “ленив и не любопытен“, годами может лежать на печи, или воровать, или пьянствовать, запустив все вокруг себя до такого состояния, что кажется - все уже, нет и не будет тут больше никакого народа. И кажется уже и первым и вторым - приходи и забирай эту землю, потому что остались тут только грязь да разруха да продажные и бессмысленные воры - бояре-начальники. И приходят. И уходят умываясь грязью и кровью, страдая от полной бестолковости применения к народу здешнему своих стратегий и тактик. А народ этот, отряхнув грязь и кровь, вдруг являет собой наивысшеее состояние человеческое, за миг исторический достигнув и в науке, и технике, и в умении воевать первых и вторых. А главное испытав духовное состояние, доселе не ведомое в истории человеческой ни первым, ни вторым. За миг достигнув и испытав, чтобы потом снова залечь на печку к разбитому корыту. Так каково же твое предназначение народ русский? “Птица-тройка“, “куда ж несёшься ты? дай ответ. Не даёт ответа.“