Float и Clear

Най-важното за float и clear

float позволява на елемент (например изображение) да “избута” текста около себе си, така че той да го обтича вместо да застава под него. Това променя нормалното подреждане на блоковите елементи.
Свойството clear се използва, когато искаме даден елемент да не се влияе от float и да не обтича плаващите елементи. Най-важното: ако искаш даден текст да започне под плаваща снимка, използвай clear.

Стъпка по стъпка: как да контролираш обтичането

1. Добави float към изображение (например вляво), за да може текстът да го обтича.
2. Увери се, че след изображението има блоков елемент (например h1 или h5).
3. Добави clear: left; към h1, за да не позволяваш на текста да застава до елемент с float: left.
4. Ако изображението е с float: right;, използвай clear: right;.
5. Ако искаш елементът изобщо да не се влияе от плаващи елементи – използвай clear: both;.

Използвани CSS свойства

• float – премества елемента вляво или вдясно и позволява на текста да го обтича.
• clear – указва от коя страна (лява, дясна или и двете) елементът не трябва да има плаващи елементи около себе си.
• clear: left; – игнорира елементи с float: left;
• clear: right; – игнорира елементи с float: right;
• clear: both; – игнорира всички плаващи елементи от двете страни