почему сбрасывается background родителя, когда в нем 3 элемента с float:left?

@mefisto74 · Регистрация: 04.08.2013

Студворк — интернет-сервис помощи студентам

http://jsfiddle.net/7MTZf/
вот собственно, с двумя флоатами работает, с третьим бэкграунд пропадает
если невозможно сделать с тремя флоатами с бэкграундом (Оо) то подскажите как в строчку их разместить, inline и inline-block пробовал, там там вроде такой же косяк.
и еще попутный вопрос в третьем флоате должна быть картинка, как сделать чтобы она не растягивалась на весь блок и далее если не влезает, и была по центру? проценты игноирует, а мне хотелось бы именно в них задать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="container">
 
<div id="block1">
111
</div>
 
<div id="block2">
222
</div>
 
<div id="block3">
333
</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
background-color:black;
width:100%:    
    
 
}
#block1 {
float:left;
height:40px;
}
#block2 {
height:40px;
float:left;
}
#block3 {
height:40px;
 
float:left;
}

Vovan-VE · 26.08.2013, 17:16

Весь контент - float. Нет нормального контента - родитель схлопнулся по высоте до нуля.

CSS
1
2
3
4
5
6
#container:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}

@Academik · 27.08.2013, 16:22

Просто добавьте одну строчку:

CSS
1
2
3
4
5
#container {
background-color:black;
width:100%:    
overflow: hidden;
}

Vovan-VE · 27.08.2013, 16:43

Сообщение от 35cm

Просто добавьте одну строчку:

CSS
5
overflow: hidden;

Неоправданный overflow:hidden; , когда его можно избежать. Аккутарно кладем грабли себе под ноги.
Да и float'а можно избежать, скорее всего.

@Academik · 28.08.2013, 17:01

Сообщение от Vovan-VE

Неоправданный overflow:hidden

Что значит неоправданный? Зачем столько кода громоздить если можно обойтись данным свойством.

Vovan-VE · 28.08.2013, 20:28

Сообщение от 35cm

Что значит неоправданный?

Значит, что Вы используете не то, что он делает в первую очередь, а побочный эффект, который из этого вытекает. И всё это при том, что есть другой, более целенаправленный способ: clear делает только то, что нужно, и ничего лишнего.

Сообщение от 35cm

Зачем столько кода громоздить если можно обойтись данным свойством.

Конечно, проще бросить грабли посреди дороги, чем отнести их в сарай на место.

Новые блоги и статьи Все статьи Все блоги /
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита, которое может. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip