Problemas extraños de la frontera div al flotar

Question

¿Podría obtener una explicación de por qué este código produce el resultado que produce? Y una forma de solucionarlo / solucionarlo, si es posible.

No quiero que div 'z' y 'q' pasen sobre 'el borde azul div' a la derecha.

O

Me gustaría que div 'x' esté de acuerdo con 'z' y 'q' y que también pase el borde derecho azul.

<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

A través de qué navegador hiciste la captura de pantalla? Si es IE, hay un problema con el modelo de caja que hace que el ancho del borde se ignore al calcular el 100% del ancho.

O creas un contenedor invisible para dimensionar los div internos o el tamaño de tu div interno a container.width -2.

También, intenta eliminar el ancho: 100%; de los div's.

Answer 2

El borde rojo está realmente dentro del borde azul de su imagen, pero supongo que desea aumentar el margen en los contenedores z y q ...

Me he tomado la libertad de incluir los atributos entre comillas dobles y de corregir las reglas de estilo que se volvieron a declarar (margen y margen inferior), pero pido disculpas por el formato de línea. para todos, permanezca dentro del bloque de código en este foro hasta que elimine los saltos de línea:

<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 escenario, puede que su diseño funcione, pero se puede romper muy fácilmente ya que no ha borrado ni manejado elementos flotantes.

Puede referirse al ejemplo que he creado. He creado un violín que funciona para este 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>