/ Курсы CSS / Свойство float и clear

Свойство float и clear


Свойство float

Свойство float определяет, по какой стороне будет выравниваться элемент. Значение к float:

left - выравнивает элемент по левому краю.
right - выравнивает элемент по правому краю.
none - нету обтекание элемента.
inherit - наследует значение родителя.

Пример использования:


 <style>
#block1 {
  width: 15%;
  float: left;
}
  </style>
  <div id="block1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, 
    facere fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, 
    recusandae in maiores ullam excepturi sed.</span>
  </div>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, facere 
    fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, 
    recusandae in maiores ullam excepturi sed.</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, facere fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, recusandae in maiores ullam excepturi sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus incidunt illum, tenetur. Cumque deserunt dolore temporibus quo dolorum alias enim iusto dignissimos quaerat. Reiciendis corporis, explicabo reprehenderit nesciunt. Rerum, nisi.

Свойство clear

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

left - отменяет обтекание с левого края элемента.
right - отменяет обтекание с правой стороны элемента.
both - отменяет обтекание элемента одновременно с правого и левого края.
none - отменяет действие свойства clear.
inherit - устанавливает значение родителя.

Пример использования:


 <style>
#block1 {
  width: 15%;
  float: left;
}
  </style>
  <div id="block1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, 
    facere fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, 
    recusandae in maiores ullam excepturi sed.</span>
  </div>
  <div id="block2" style="clear: left;">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, 
    facere fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, 
    recusandae in maiores ullam excepturi sed.</span>
  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugiat, facere fuga qui sit corporis incidunt atque culpa et vel ipsum dolorem quisquam voluptates, recusandae in maiores ullam excepturi sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus incidunt illum, tenetur. Cumque deserunt dolore temporibus quo dolorum alias enim iusto dignissimos quaerat. Reiciendis corporis, explicabo reprehenderit nesciunt. Rerum, nisi.