маржинальная вершина под плавающим div css

Question

У меня есть div под плавающей точкой: справа div. По какой-то причине верхнее поле не может быть применено к первому элементу div. вот ксс

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 } 

кто-нибудь знает, что происходит?

Answer 1

Плавающие вещи вроде выплывают из обычной компоновки, поэтому обычно не влияют на другие вещи, которые не плавают, как они.Конечно, поведение float в разных браузерах отличается, но это общая идея.

После плавающего div вам понадобится что-то (например, пустой div), которое очистит float (has style = "clear: both; ").

Однако, как я уже сказал, поведение браузера все равно будет зависеть от того, откуда он решит, с какого поля следует рассчитывать.Конечно, есть обходные пути для этого. Подробнее об этом см. На этой странице.

Answer 2

Решение без лишних <div>

Что вы видите, так это проблема свертывания вертикальных полей в CSS3.Эта проблема будет более легко решена с появлением CSS4.В то же время, это не хорошая идея добавить дополнительные <div>, как бы легко это не звучало.Как правило, лучше держать контент и презентацию строго разделенными.

Вот как я решил эту проблему на моем сайте .В этом решении используется отсутствие сжатия вертикальных полей внутри встроенных блоков.

#under должно содержать как минимум следующие элементы:

#under {
    clear: both;
    display: inline-block;
    width: 100%;
}

Answer 3

попробуйте этот css snipe, я думаю, что это решит вашу проблему.

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}