problemas de fronteira div estranhos quando flutuantes

Question

Eu poderia agradar obter uma explicação de por que este código produz o resultado que ele faz? E uma maneira de corrigi-lo / trabalhar em torno dele, se possível.

Eu não quero div 'z' e 'q' para passar por cima 'da fronteira div azul' à direita.

ou

Gostaria div 'x' para ser consitant com 'z' e 'q' e também passar por cima da borda direita azul também.

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
    </div>
     <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>

Answer 1

durante todo o navegador que você produzir a imagem? Se for IE, há um problema com o modelo de caixa que faz com que a largura da borda para ser ignorado ao calcular% largura de 100.

Ou você criar um recipiente invisível para o tamanho do div interna ou o tamanho do seu div interna para container.width -2.

Além disso, tente remover o width:. 100%; a partir do div

Answer 2

O vermelho-fronteira é, na verdade, dentro da borda azul em sua imagem - mas eu suponho que você quer aumentar a margem sobre os recipientes z e q ...

Eu tomei a liberdade de encerrar os atributos entre aspas e corrigir as regras de estilo que foram re-declarada (margem e margin-bottom) - mas desculpas para a linha de formatação - eu não poderia parecer começar a todos estadia no interior do bloco de código neste fórum até que eu tirei as quebras de linha:

<div style="margin: 5px;width: 653px;border: blue 1px solid;float: left;"><div style="margin: 5px;width: 100%;border: red 1px solid;">z</div><div style="overflow: hidden;margin: 5px;width: 100%;border: red 0px solid;"><div style="margin: 0px;width: 300px;border: red 1px solid;float: left;">y</div><div style="margin: 0px;width: 300px;border: red 1px solid;float: right;">x</div></div><div style="margin: 5px;width: 100%;border: red 1px solid;">q</div>

Answer 3

Para este cenário pode ser seu projeto está funcionando, mas pode quebrar muito facilmente como você não limpou e manipulados elementos flutuantes.

Você pode consultar exemplo, eu tenho created.I criaram um violino a trabalhar para esse tipo de problemas.

http://jsfiddle.net/mayankipsa/e7snvdag/

.floatLeft { float: left;}
.floatRight { float: right;}
.clearBOTH { clear: both; }

.redBorder{border:1px solid red;}
.blueBorder{border:1px solid blue;}

.x,.y{width:49%;margin:1px; }
.z{margin:1px;}
.q{margin:1px;}

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
    </div>
     <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>
</div>

<div class="clearBOTH"></div>
<div class="blueBorder" style="margin-top:50px;">
    <div class="z redBorder">z</div>
    <div class="redBorder">
        <div class="y floatLeft redBorder">y</div>
        <div class="x floatRight redBorder">x</div>
        <div class="clearBOTH"></div>
    </div>
    <div  class="q redBorder">q</div>
</div>