Вопрос по float

VictorioIP · September 4, 2012

Есть данный код:

<!doctype html>

<html>

<head>

#content{

width: 100px;

height: 100px;

background-color: black;

float: left;

}

#footer{

float: right;

width: 100px;

height: 100px;

background-color: grey;

}

#navigation{

height: 100px;

background-color: red;

margin-right: 102px;

margin-left: 102px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

У меня вопрос. Черный квадрат с float: left выходит из обычного flow, красный элемент как бы не видит его, но серый элемент с float: right, почему-то не над красным элементом, а ниже его. Почему так происходит, и как сделать так чтобы серый элемент был над красным(есть ли способ без отрицательного margin или абсолютного позиционирования).

Второй вопрос: когда определенный блок находится в элементе с float, к которому(определенному блоку) не применяется какой-либо из floatoв, и еще один элемент внутри того же элемента с float, но уже с примененным к нему float, почему то чувствует элементы без float. Почему так происходит.

Спасибо.

wwt · September 4, 2012

измените порядок элементов, и все блоки выстроятся в ряд:


<div id="content">

</div><!-- end content -->

<div id="footer">

</div><!-- end footer -->
<div id="navigation">

</div><!-- end navigation -->

Происходит это потому-что: элементы следующие за блочным элементом, в нашем случае div#navigation, переносятся на следующую строку, если этому блочному элементу задан float то блок выравнивается в указанную сторону а следующие за ним элементы обтекают его с противоположной стороны .

В вашем случае черный блок выравнен слева и красный блок следует(обтекает его) за ним, но красный блок обтекание не имеет и поэтому следующий за ним серый блок переносится на следующую строку.Если изменить порядок элементов как указал я то сначала идут блоки с заданным обтеканием у одного слева у другого справа и красный блок влазит между ними =) надеюсь понятно объяснил, пошел пиво пить дальше.

Edited September 4, 2012 by wwt

VictorioIP · September 4, 2012

Спасибо

Sign In

Вопрос по float

Question

VictorioIP

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

VictorioIP

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information