Свойство float

Ответы на вопросы

1. Для чего предназначено свойство flоat. Какие значения может принимать это свойство? Как действуют эти значения? Какое значение работает по умолчанию? К каким элементам можно применять это свойство, передаётся ли оно по наследству?

   Ответ. Свойство flоat заставляет другие элементы обтекать элемент-носитель свойства. Свойство может принимать следующие значения:

   • left — элемент прижимается слева, обтекание справа;
   • right — элемент прижимается справа, обтекание слева;
   • none — обтекания нет (значение работает по умолчанию).

   Свойство применимо ко всем элементам, по наследству не передаётся.

2. Вспомните характерные черты поведения строчного элемента в потоке. К строчному элементу применили свойство flоat. Как изменится его поведение? Останется ли элемент строчным?

   Ответ. Характерные черты поведения строчного элемента в потоке:

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

   Строчный элемент, к которому применили свойство flоat, становится блочным.

3. Плавающий элемент прижимается к левому (или правому) краю своего контейнера. Объясните подробнее (в терминах коробочной модели), какой именно частью плавающий элемент прижимается к своему контейнеру? И к какой именно части контейнера?

   Ответ. Внешний край внешнего отступа плавающего элемента соприкасается с краем области содержимого своего контейнера:

   

4. Какое положение занимает плавающий элемент по вертикали, если он был блоком? Схлопываются ли внешние отступы плавающих элементов?

   Ответ. Верх плавающего элемента занимает такое место, которое оно имело бы в потоке, за исключением одного момента: внешние отступы плавающего элемента не схлопываются.

5. Назовите два правила, которые работают для определения положения плавающего элемента по вертикали, если он был строчным.

   Ответ.

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

   Второе правило. Плавающий элемент должен располагаться максимально высоко, не нарушая при этом первое правило.

6. Как ведет себя плавающий элемент по отношению к потоку, из которого он был изъят? Как ведет себя поток, над которым имеется плавающий элемент?

   Ответ. Плавающий элемент поднимается над потоком. Он смещается по горизонтали к краю области содержимого своего контейнера. Блоки, следующие за ним, подтягиваются вверх и занимают освободившееся место в потоке.

   Однако плавающий элемент не перекрывает содержимое других блоков. Содержимое начинает обтекать плавающий блок со свободной стороны.

   

7. Объясните, как будут вести себя несколько плавающих блоков по отношению друг к другу и потоку. Рассмотрите следующие случаи:
   • между плавающими элементами в потоке были другие элементы;
   • плавающие элементы в потоке шли подряд;
   • плавающие элементы имеют разнотипное значение свойства flоat (left и right ).

   Ответ.

   Между плавающими элементами в потоке были другие элементы. В этом случае второй блок оказывается ниже первого:

   

   Плавающие элементы в потоке шли подряд. В этом случае блоки располагаются на одной горизонтали (если для этого хватает места):

   

   Плавающие элементы имеют разнотипное значение свойства flоat (left и right ). В этом случае блоки располагаются на одной горизонтали при условии, что в HTML-коде они идут подряд и в области просмотра хватает места. Блоки прижимаются к разным сторонам контейнера:

   

8. Второй блок, вложенный в первый, сделали плавающим. Чему окажется равной высота первого блока, если высота второго 100 пикселов и кроме второго блока в первом больше ничего нет?

   Ответ. Высота первого блока (высота области его содержимого) окажется равной нулю, если кроме второго блока в первом нет других элементов. Второй блок стал плавающим, он удаляется из потока и его родитель оказывается пустым.

9. Второй блок, вложенный в первый, сделали плавающим. В первом блоке кроме второго блока других элементов нет. Как можно сохранить фон первого блока под вторым блоком и рамку первого блока вокруг второго?

   Ответ. Нужно первый блок также сделать плавающим. Плавающий элемент не выходит за пределы своего плавающего родителя (если только не заданы отрицательные внешние отступы).

10. Какое свойство позволяет прекратить обтекание? Какие значения может принимать это свойство? Как работают эти значения, какое из них действует по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

    Ответ.

    Прекратить обтекание позволяет свойство clear. Оно может принимать следующие значения:

    • clear:left — прекращает обтекание элементов float:left;
    • clear:right — прекращает обтекание элементов float:right;
    • clear:both — прекращает обтекание элементов float:left и float:right.
    • clear:none (работает по умолчанию) — допускает обтекание с любой стороны.

    Свойство clear применимо только к блочным элементам (например, нельзя использовать <BR style="clear:left">, так как элемент BR — строчный), по наследству не передаётся.

    Блок, в котором задано свойство clear опускается, пока не окажется ниже плавающего элемента.

вверх | возврат