Float element to direct [closed]

For the float to work properly you need to add a div with style clear: both; not to overwrite the content below. I made a template page About Mirror Fashion as an example:

   <figure id="centro-distribuicao">
      <img src="https://s10.postimg.org/9dp0m5s6h/centro_distribuicao.png"><figcaption>CentrodedistribuiçãodaMirrorFashion</figcaption></figure><p>Nossocentrodedistribuiçãoficaem<ahref="#">Jacarezinho, no Paraná</a>. De lá, saem 48 aviões quedistribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:</p>
    <p>Compre suas roupas e acessórios na Mirror Fashion. Acesse <a href="#">nossa loja</a> ou entre em <a href="#">contato</a> se tiver dúvidas. Conheça também nossa <a href="#">história</a> e nossos <a href="#">diferenciais</a>.</p>
  <div class="clear"></div>

Css:

<style>
   .clear {
     clear: both;
   }
   figure {
    width: 550px;
    text-align: center;
    background-color: #F2EDED;
    border: 1px solid #ccc;
    padding: 12px 12px 10px;
    margin-left: 12px;
    margin-right: 0;
  }
  #centro-distribuicao {
    float: right;
  }
</style>

See example: link

Ever try to put a margin on it?

#centro-distribuicao {
    float: right;
    width: 550px;
    margin-left: 10px;
}