Часткова відміна float в css

Відео: Курс Основи HTML і CSS - CSS властивість float [Урок 11]

Відео: Уроки CSS - Урок 5 - Властивості float, clear. Бестаблічная верстка

У цій статті я вирішив розібрати одну проблему, яка іноді зустрічається при верстці, і при цьому в Інтернеті знайти її рішення дуже важко. У цій статті ми розберемо проблему часткового скасування float в CSS, а так же я Вам покажу її рішення.

Отже, давайте розберемо ось такий код:

Відео: 30 CSS Absolute and Relative Position float

І CSS-код:

Яка була наша задача? зробити 2 колонки: у лівій колонці є якийсь контент, в правій колонці є стаття. І у цій статті є картинка з float: left; (Як і у лівого блоку). Потім ми хочемо вивести блок з інформацією про статтю, безумовно, ми не хочемо, щоб ця інформація була праворуч від картинки. Тому додаємо clear-блок. Однак, тут нас чекає сюрприз.

Скасувалося не тільки float: left; у картинки, а й у лівого блоку. Таким чином, інформація про статтю пішла вниз, порівнявшись з нижньою межею лівого блоку (оскільки він вище). Як вирішити цю проблему? Дуже просто, достатньо в блок #right додати властивість overflow:

Тепер все встало на свої місця. властивість overflow відповідає за відображення того, що знаходиться за межами блоку. І hidden повідомляє, що буде відображатися лише те, що знаходиться всередині блоку, а все інше буде приховано. Саме це властивість і значення дозволяє нам вирішити проблему з частковим скасуванням float в CSS.