How to position a block according to BEM?

Question

css

The block should not affect its environment, i.e. the block should not be given external geometry (in the form of padding, borders that affect dimensions) and positioning

Please help to remake this code https://jsfiddle.net/j32kv7tz/2/ so that the blocks can be swapped without problems. Now block with float:right cannot be swapped

Answer 1

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>

.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;
}

Answer 2

Blocks are positioned through the parent element
in .header .header__form is needed, which will be given positioning and sizes
in it, put the .form block itself, which will take the size of .header__form
about swapping, here you can set float to all in one direction. And it's better to disassemble the grids for flex

Answer 3

<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;