Довольна часто встречается ситуация, когда из-за того, что элементам задают различные параметры свойства float. Из-за этого другие элементы ведут себя не так как нам хотелось бы. Справится с такой ситуацией нам поможет свойство clear с параметром both CSS языка.
Давайте рассмотрим пример, когда это свойство необходимо. Допустим у нас есть такая HTML стурктра:
И соответствующие CSS стили к нему:
Посмотрев на код можно понять, два дива будут прижиматься к противоположным сторонам, а последний див будет содержать текст. Как вы думаете, это все будет выглядеть в браузере?
А вот как:
Так получилось, что последний див был зажат между двумя другими, почему такое произошло? Дело в том, что свойство float заставляет обтекать элемент, которому задается с противоположной стороны, которая задается этому свойству, это удобно для того, чтобы размещать два элемента на одной линии, но по разным краям, но вызывает проблему, если остается незаполненный промежуток, тогда в этот промежуток могут полезть элементы следующие дальше.
Если мы не хотим, чтобы структура сайта решилась по этой причине, то следующему элементу за таким нужно присвоить свойство clear, именно оно запрещает обтекание этим элементом. Это свойство принимает следующие параметры none - не запрещать обтекание; left - запретить обтекать элементы, прижатые к левой стороне; right - соответственно к правой; both - запретить обтекать любые элементы.
Если мы добавит следующий код в 15 строчку CSS стилей:
Тогда вот как это будет выглядеть в браузере:
Бывает по разным причинам, что такое свойство может мешать, либо после таких блоков у вас изменяющееся содержание, меняются элементы и устанавливать им всем это свойство неудобно, тогда между div.left, div.right элементами и последующими за ними ставят бесцветную разделяющую линию <hr> и ей задают это свойство. Результат будет аналогичен тому, что выше, но в некоторых ситуациях более удобен.
Добавить комментарий
Авторизоваться с помощью: