Float element to direct

Question

How could I float this image to direct without breaking the page? in this image, the css is like this:

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

Answer 1

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

   <figure id="centro-distribuicao">
      <img src="https://s10.postimg.org/9dp0m5s6h/centro_distribuicao.png">
      <figcaption>Centro de distribuição da Mirror Fashion</figcaption>
    </figure>
    <p> Nosso centro de distribuição fica em <a href="#">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 in the example: https://codepen.io/jamillerocha21/full/wWRJYg

Answer 2

Ever tried to put a margin on it?

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