Как убрать обтекание и раскрыть родительский блок с float элементами?
Когда внутри родительского блока находятся только float (плавающие) элементы, то родительский блок схлопывается. Как убрать обтекание и раскрыть родительский блок рассмотрим далее.
Перед тем как начать, давайте обозначим некоторые определения:
– родительским блоком можно назвать любой блок относительно вложенных в него блоков, например блок <ul> – родительский для вложенных в него элементов списка – <li>;
– дочерний блок – это соответственно любой вложенный блок относительно бока верхнего уровня.
ДемоИсходники
Обозначим проблему с обтекаемостью
Сделаем обычный список, элементы которого имеют float:left;
<ul>
<li>Элемент №1</li>
<li>Элемент №2</li>
<li>Элемент №3</li>
<li>Элемент №4</li>
</ul>
ul li { float:left; }
В результате родительский блок схлопывается:
Для того чтобы этого не происходило необходимо убрать обтекаемость после элементов списка и для этого есть несколько способов.
Убрать обтекаемость
Первый способ борьбы – это задать overflow:hidden для родительского элемента.
ul {overflow: hidden;}
Таким образом мы убираем обтекаемость, родительский блок понимает где кончается плавающие элементы и схлопывания не происходит.
Такой вариант может не подойти в случае, если у вас меню с выпадающими подпунктами, т.к. родительский блок будет обрезать выпадающие элементы.
Второй способ.
Второй способ очень хорош и имеет кроссбраузерную поддержку. Необходимо родительский элемент обозначить как inline-block и задать 100% ширину.
ul {display: inline-block; width: 100%;}
Проблему с whitespace`ом у инлайновых элементов можно решить почитав этот пост CSS — как убрать промежутки между inline блоками?
Третий способ.
Можно банально добавить внутрь родительского блока, в самом конце еще один блок, которому прописать стили с очисткой обтекаемости.
<ul>
<li>Элемент №1</li>
<li>Элемент №2</li>
<li>Элемент №3</li>
<li>Элемент №4</li>
<div></div>
</ul>
И прописать стили для класса .clear
.clear {
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Но этот вариант весьма не практичен, т.к. мы создаем отдельный пустой элемент в нашей верстке, что не есть гуд 🙂
Четвертый способ.
По сути он отталкивается от предыдущего решения, но вместо создания пустого блока, мы воспользуемся псевдо-элементом :after.
ul:after {
content: "."; //не пустой для Opera это важно 🙂
display: block;
clear: both; //очищаем обтекаемость
visibility: hidden; //не отображаем
line-height: 0; //высоту блока и строки сводим на ноль, чтобы не было видно этого блока
height: 0;
}
Вот такое решение намного эстетичнее!
Для вас все примеры со стиля ми выложил в демке, можете потестить на разных браузерах и подобрать себе свой вариант.
ДемоИсходники
clear — CSS | MDN
Свойство clear CSS указывает, может ли элемент быть рядом с плавающими floating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear
При применении к неплавающим блокам он перемещает границу края border edge (en-US) элемента до тех пор, пока не окажется ниже края margin edge (en-US) поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.
Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам — margin edge (en-US) нижнего элемента перемещается ниже margin edge (en-US) всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.
Поплавки, которые имеют отношение к очистке, — это более ранние поплавки в одном и том же контексте форматирования блоков (en-US)
Примечание: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это — это заменит clear заменённый ::after псевдоэлемент на нем.«`css
#container::after {
content: «»;
display: block;
clear: both;
}
/* Значения ключевых слов */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;
Значения
noneЯвляется ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
leftЯвляется ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить левые поплавки.
rightЯвляется ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые правые поплавки.
bothЭто ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
inline-startЯвляется ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в начале содержащего его блока, то есть левые поплавки на скриптах ltr и правые поплавки на скриптах rtl.
inline-endЯвляется ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков
Формальный синтаксис
clear =
inline-start | (en-US)
inline-end | (en-US)
block-start | (en-US)
block-end | (en-US)
left | (en-US)
right | (en-US)
top | (en-US)
bottom | (en-US)
none
clear: left
HTML
<div> <p>Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> <p>Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Этот абзац очищается слева.</p> </div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.left {
border: 1px solid black;
clear: left;
}
. black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
clear: right
HTML
<div> <p>Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Этот абзац очищается справа.</p> </div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
clear: both
HTML
<div> <p>Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> <p>Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".</p> <p>Этот абзац очищает оба.</p> </div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.both {
border: 1px solid black;
clear: both;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 45%;
}
| Спецификация | Статус | Коммент |
|---|---|---|
| CSS Logical Properties and Values Level 1 Определение ‘float and clear’ в этой спецификации. | Редакторский черновик | Добавляет значения inline-start и inline-end. |
| CSS Level 2 (Revision 1) Определение ‘clear’ в этой спецификации. | Рекомендация | Никаких существенных изменений, хотя детали уточняются. |
| CSS Level 1 Определение ‘clear’ в этой спецификации. | Рекомендация | Начальное определение |
| Начальное значение | none |
|---|---|
| Применяется к | блочные элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.- Box model (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved? Learn
how to contribute.
This page was last modified on by MDN contributors.
html — CSS без переноса текста
спросил
Изменено 2 года, 5 месяцев назад
Просмотрено 167 тысяч раз
См. код http://jsbin.com/eveqe3/edit, также приведенный ниже.
Мне нужно показать текст внутри элементов div таким образом, чтобы текст отображался только в зеленом поле с указанной шириной, остальную часть строки нужно скрыть. Любые предложения, пожалуйста…
<стиль>
#контейнер{
ширина: 220 пикселей;
}
. элемент{
плыть налево;
граница: 1px сплошная #0a0;
ширина: 100 пикселей;
высота: 12 пикселей;
отступ 2px;
поля: 0px 2px;
}
.clearfix{
ясно: оба;
}
<тело>
<дел>
Очень оооооооооооооооооочень длинный текст
Еще один оооооооооооооооооооочень длинный текст
<дел>
элемент{
плыть налево;
граница: 1px сплошная #0a0;
ширина: 100 пикселей;
высота: 12 пикселей;
отступ 2px;
поля: 0px 2px;
}
.clearfix{
ясно: оба;
}
<тело>
<дел>