1

Надо, чтобы синий блок плавал вправо вверху контейнера #wrapper, а не уходил вниз вместе со вторым красным блоком.

Вопросы:

  1. Почему синий блок уходит вниз вместе с красным блоком?

  2. Как сделать так, чтобы синий блок плавал вправо вверху контейнера?

#wrapper {
  color: #fff;
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  background-color: #000;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: darkblue;
}

.clear {
  clear: both;
}
<div id="wrapper">
  <div>
    <div class="left"></div>
    <div class="clear"></div>
  </div>
  <div>
    <div class="left"></div>

  </div>
  <div class="right"></div>

</div>

5
  • Дополнил и подкорректировал вопрос
    – JustLearn
    7 мар 2019 в 16:24
  • Почему id одинаковые?
    – Qwertiy
    7 мар 2019 в 16:42
  • @Qwertiy щас исправим)
    – JustLearn
    7 мар 2019 в 17:15
  • @Qwertiy исправил
    – JustLearn
    7 мар 2019 в 17:16
  • Я уточнил 2-ой вопрос
    – JustLearn
    7 мар 2019 в 17:20

1 ответ 1

1

Добавил div'у с clearfix'ом обводку. Никакой float после него не может оказаться выше, поскольку этот блок уже отрисован.

#wrapper {
  color: #fff;
  height: 500px;
  margin: 0 auto;
  background-color: #000;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: darkblue;
}

.clear {
  clear: both;
}
<div id="wrapper">
  <div style="outline:4px solid green">
    <div class="left"></div>
    <div class="clear"></div>
  </div>
  <div>
    <div class="left"></div>
  </div>
  <div class="right"></div>
</div>

И тут дело именно в отрисованности, а не в clear - ты же не ожидаешь, что в следующем примере синий блок будет поверх серого?

<div style="background: silver; height: 2em;"></div>
<div style="float: right; background: blue; height: 3em; width: 3em;"></div>

Исправить можно переставив синий блок в начало разметки:

#wrapper {
  color: #fff;
  height: 500px;
  margin: 0 auto;
  background-color: #000;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: darkblue;
}

.clear {
  clear: both;
}
<div id="wrapper">
  <div class="right"></div>
  <div>
    <div class="left"></div>
    <div class="clear"></div>
  </div>
  <div>
    <div class="left"></div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.