Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
7. Скрити елементи, прозрачности и responsive дизайн

Float и Clear

Курсове HTML5 и CSS3 Седмица 7 - Скрити елементи, прозрачности и responsive дизайн
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за 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; – игнорира всички плаващи елементи от двете страни

Дискусия към урока