Добавление float делает нерабочим margin.

[ratus]

Здравствуйте!  У меня 2 div блока, идущие друг за другом. Добавление float для любого из слоев, и неважно с каким значением, делает нерабочим margin. Один из объектов словно прилипает к верхней части страницы. Если float убрать, то слои можно свободно двигать.  Как избавится от данного эффекта? И с чем это может быть связанно?  

Заранее спасибо.

[klierik]

Это связанно с тем, что Вы используете float. Вполне ожидаемо именно такое поведение браузера.

Выложите наглядный пример на jsfiddle

[ratus]

https://jsfiddle.net/ratus/z7b0ev5k/1 Правильно ли я поступил?

[klierik]

А чего именно Вы пытаетесь добиться?

[ratus]

Выровнять колонки. 

[klierik]

Выровнять как именно?

.fone65 {
  width: 100px;
  padding: 20px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 100px; /* тут */
  display: inline;
  overflow: hidden;
}

У Вас отступ сверху, по горизонтали они не будут выровнены

[ratus]

<div class="fone65"> Опустить ниже относительно <div class="fone35">. Для этого обязательно убрать  float? 

А если ниже?

Удаление margin-top, похоже, вообще не сыграло роли Я же говорил margin не работает при float.  

https://jsfiddle.net/ratus/z7b0ev5k/16. Один из блоков прилип к верхнему краю.

[klierik]

В случае, когда используется float, margin работает как и прежде. Но, визуально, может казаться что это не так. Дело в том, что в таком случае блоки не имеют аналогичного влияния друг на друга из-за обтекания (float).

Вот приблизительно то, о чём Вы говорите

https://jsfiddle.net/klierik/bw418vqt/2/

[ratus]

17.01.2021 в 18:01, klierik сказал:

Выровнять как именно?

.fone65 {
  width: 100px;
  padding: 20px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 100px; /* тут */
  display: inline;
  overflow: hidden;
}

У Вас отступ сверху, по горизонтали они не будут выровнены

С этим я понял, но как теперь быть с display: inline;  fone65 ведет себя как display: block 

https://jsfiddle.net/ratus/1wLc2z7t/2/

[klierik]

9 часов назад, ratus сказал:

С этим я понял, но как теперь быть с display: inline;  fone65 ведет себя как display: block 

https://jsfiddle.net/ratus/1wLc2z7t/2/

Для .fone65 Вы используете "float", тем самым свойство "display" игнорируется, элемент становится блочным.

[ratus]

Теперь не задается  элемент как блочный. Почему https://jsfiddle.net/ratus/g879ptjy/2/. display: block