Какие знаешь способы сдвинуть блок внутри другого блока вправо

«Какие знаешь способы сдвинуть блок внутри другого блока вправо» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Есть несколько способов сдвинуть блок внутри родительского блока вправо:

  1. margin-left: auto
.child {
  margin-left: auto;
}
  1. Flexbox
.parent {
  display: flex;
}
.child {
  margin-left: auto;
}
  1. Grid
.parent {
  display: grid;
  grid-template-columns: 1fr auto;
}
  1. Absolute positioning
.parent {
  position: relative;
}
.child {
  position: absolute;
  right: 0;
}
  1. Float (устаревший способ)
.child {
  float: right;
}

Лучшие современные варианты - flexbox и grid. Margin-left: auto также работает, но менее гибкий. Absolute positioning вырывает элемент из потока.