Alineación de un elemento de bloque con margen izquierdo en CSS

El valor auto para margin en realidad no solo puede centrar. Este valor permite calcular el margen automáticamente y hacerlo lo máximo posible. Cuando establecemos auto para los márgenes izquierdo y derecho - el elemento se centra.

Sin embargo, se puede establecer solo el margen izquierdo. En este caso, el elemento obtendrá el margen izquierdo máximo posible y ocupará la posición extrema derecha:

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* establecemos margen izquierdo automático */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: