Проблема с float

[ruvi]

Здравствуйте!

 

Код:

<div class="frame">  <div class="float-block">    <div class="image"></div>    <div class="holder">Красивое нарядное платье «Снежанна»</div>  </div></div>

.frame{	overflow:hidden;	height:1%;	margin:0 0 30px;}.float-block{	float:left;	padding:20px;	background-color:red;	margin:;}.float-block .image{	float:left;	background-color:blue;	width:30px;	height:30px;	margin:0 10px 0 0;}.float-block .holder{	display:block;	overflow:hidden;	height:1%;}

http://prntscr.com/23m7ge

 

Почему «Снежанна» падает вниз , а не растягивает красный блок?

Как флотнутый блок высчитывает свой размер?

[npofopr]

http://htmlbook.ru/css/float

http://css-tricks.ru/Articles/Details/AllAboutFloats

http://habrahabr.ru/post/142486/

http://habrahabr.ru/post/136588/

+ http://htmlforum.ru/index.php?showtopic=18446

[spdif]

.frame{

overflow:hidden;

margin:0 0 30px;

}

.float-block{

float:left;

padding:20px;

background-color:red;

}

.float-block .image{

float:left;

background-color:blue;

width:30px;

height:30px;

margin:0 10px 0 0;

}

.float-block .holder{

display:block;

overflow:hidden;

}

[SelenIT]

Вдобавок http://habrahabr.ru/post/136622/#surprise (конкретно про этот случай).

 

По спецификации, «желаемая ширина» флоата рассчитывается по контенту, размещенному в одну строку везде, где только можно. Но вот включать ли в эту ширину вложенные флоаты или нет — браузеры расходятся во мнениях. Fx и Вебкит/Блинк впихивают вложенный флоат в уже рассчитанный внешний, отчего текст перестает вмещаться и переносится, IE и старая Опера (на Престо) добавляют ширину флоата к контейнеру, текст при этом не переносится. Насколько я понимаю спецификацию, ее букве и духу лучше отвечает поведение IE (как ни странно), а поведение Fx и хромиумов является багом.

[ruvi]

большое спасибо npofopr, spdif, SelenIT ! 

 

Очень помогло :

 

Вдобавок http://habrahabr.ru/...36622/#surprise (конкретно про этот случай).

 

По спецификации, «желаемая ширина» флоата рассчитывается по контенту, размещенному в одну строку везде, где только можно. Но вот включать ли в эту ширину вложенные флоаты или нет — браузеры расходятся во мнениях. Fx и Вебкит/Блинк впихивают вложенный флоат в уже рассчитанный внешний, отчего текст перестает вмещаться и переносится, IE и старая Опера (на Престо) добавляют ширину флоата к контейнеру, текст при этом не переносится. Насколько я понимаю спецификацию, ее букве и духу лучше отвечает поведение IE (как ни странно), а поведение Fx и хромиумов является багом.