Почему плавающие элементы не могут устанавливать свои левые и правые поля

Question

В div-обертке плавающие элементы не реагируют на настройки левого и правого полей.Пример:

html:

<div id ="wrapper">
    <div id = "content"></div>
</div>

css:

#wrapper
{
   width:       1000px; 
   display:         block;
   margin-left:         auto;
   margin-right:    auto;
   overflow:            hidden;
}

#content
{
   width:               400px;
   height:              200px;
   display:             block;
   float:               left;
   margin-left:         30px;
}

#content игнорирует настройку левого поля.Почему?

Answer 1

Поля не перемещают всплывающие элементы, они «отталкивают содержимое».

Если вы хотите переместить плавающий элемент, вы можете задать ему следующие правила CSS:

#content {
    position: relative;
    left: 30px;
}

Альтернатива - дать элементу прозрачную рамку:

#content {
    border-left: 30px transparent;
}

Если вы просто хотите расположить div внутри другого div, используйте абсолютное позиционирование:

#wrapper {
    position: relative; /* required for absolute positioning of children */
}

#content {
    position: absolute;
    left: 0;
}

Answer 2

@ Маркус отвечает хорошо. Другой способ подделать поля с плавающим элементом - поместить содержимое в другой контейнер и использовать заполнение:

.outer
{
    float: left;
    padding: 10px;
}

.inner
{
}

Answer 3

Более поздняя техника CSS, которая отлично работает в этом сценарии, - это использование свойства CSS transform с переводом X или Y. Это действует только для плавающего элемента, поэтому не дает непреднамеренного эффекта перемещения других элементов.

Пример преобразования:

.floated-element {
  // move the floated element 10 pixels to the left
  transform: translateX(-10px);
}