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

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

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

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

HTML5

<div id="container">
 
<div id="block1">
111
</div>
 
<div id="block2">
222
</div>
 
<div id="block3">
333
</div>
 
</div>

CSS

#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

#container:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}

@Academik · 27.08.2013, 16:22

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

CSS

#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

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

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

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	28.08.2013, 17:01	5
	Сообщение от Vovan-VE Неоправданный overflow:hidden Что значит неоправданный? Зачем столько кода громоздить если можно обойтись данным свойством. 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	28.08.2013, 20:28	6
	Сообщение от 35cm Что значит неоправданный? Значит, что Вы используете не то, что он делает в первую очередь, а побочный эффект, который из этого вытекает. И всё это при том, что есть другой, более целенаправленный способ: clear делает только то, что нужно, и ничего лишнего. Сообщение от 35cm Зачем столько кода громоздить если можно обойтись данным свойством. Конечно, проще бросить грабли посреди дороги, чем отнести их в сарай на место. 1