Как спозиционировать блок согласно БЭМ?

Question

[dqwe93]

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование

Помогите переделать этот код https://jsfiddle.net/j32kv7tz/2/ так, чтобы блоки можно было без проблем менять местами. Сейчас блок с float:right невозможно поменять местами

Comments

[Иван Доброславин]

Братка, ты собеседование не можешь пройти? Стоит ли туда суваться? Поверь, дальше будет больше не разрешаемых вопросов...

[Сергей delphinpro]

В контексте БЭМ как-то так https://jsfiddle.net/vy5qdtx4/

Answer 1

[Faber Estello]

HTML:

<header class="header">
  <div class="header-form">
    <div class="form">float:right</div>
  </div>
  <div class="header-logo">
    <div class="logo">float:left</div>
  </div>
  <div class="header-search">
    <div class="search">float:left</div>
  </div>
</header>

CSS:

.header {
  background-color: red;
  width: 100%;
  height: 400px;
}

.header-form {
  float: right;
  width: 20%;
}

.header-logo {
  float: left;
  width: 30%;
}

.header-search {
  float: left;
  width: 50%;
}

.logo {
  height: 50px;
  background-color: blue;
}

.search {
  background-color: green;
  height: 50px;
}

.form {
  background-color: orange;
  height: 50px;
}

Comments

[dqwe93]

всеравно блок с float:right нельзя просто поменять местами с другими блоками, поменяв их местами в коде HTML

Answer 2

[Алекс Глебов]

Блоки позиционируются через элемент родителя
в .header нужен .header__form которому будут заданы позиционирование и размеры
в него положи .form сам блок, который примет размер .header__form

про поменять местами, тут можно задать float всем в одну сторону. А лучше разбирай сетки на флекс

Comments

[dqwe93]

на флексах то понятное дело что это будет работать, а вот как реализовать верстку по БЭМ на флоатах как в подобном примере

Answer 3

[takitak]

<header class="header">

    <div class="form header__form">float:right</div>
    <div class="logo header__logo ">float:left</div>
    <div class="search header__search">float:left</div>
</header>

.header__form
  float:right;

.header__logo
  float:left;

.header__search
  float:left;