float и вложенные слои

Cage · October 1, 2009

<div style="background: #ccc; width: 100%">
  <div style="float: left; width: 300px; background: #000">123<br>123<br>123<br>123<br>123<br></div>
  123
</div>

В FF внутренний слой вылазит за пределы внешнего. Почему так происходит? В IE все нормально. Какой браузер отображает этот код правильно? Как сделать так, чтобы внутренний слой был слева и не вылазил за пределы внешнего слоя, не задавая фиксированную высоту внешнего слоя?

Заранее спасибо за ответы.

gesandte · October 1, 2009

отмени обтекание

s0rr0w · October 1, 2009

В FF внутренний слой вылазит за пределы внешнего. Почему так происходит?

Потому что вы ему присвоили float, что автоматически "вырвало" его из потока.

В IE все нормально. Какой браузер отображает этот код правильно? Как сделать так, чтобы внутренний слой был слева и не вылазил за пределы внешнего слоя, не задавая фиксированную высоту внешнего слоя?

В IE как раз все неправильно. FF показывает так, как и должно быть.

overflow: hidden вам нужно. А вообще, прежде чем писать сюда посты, вам следует прочитать форум. В следующий раз дублирующие темы буду удалять.

gesandte · October 1, 2009

clear: both; в отдельный блок и применить этот блок перед закрытием родителя или overflow: hidden; в родительский блок

)))))))))) пока печатал, уже напечатали без меня

Cage · October 1, 2009

gesandte, s0rr0w спасибо. Теперь все отображается как нужно

sergiyko · October 5, 2009

clear: both; в отдельный блок и применить этот блок перед закрытием родителя

А это как? Можете показать

gesandte · October 5, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Clear: both</title>
<style type="text/css">
.clear {
  clear: both;
}

.block {
  background: #ccc;
  width: 100%;
}

.float {
  background: #000;
  width: 300px;
  float: left;
}
</style>
</head>
<body>

<div class="block">
  <div class="float">
    123<br>123<br>123<br>123<br>123<br>
  </div>
  123
  <div class="clear"></div>
</div>

<body>
</html>

Edited October 5, 2009 by gesandte

Sign In

float и вложенные слои

Question

Cage

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

gesandte

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

Cage

Link to comment

Share on other sites

sergiyko

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information