Problèmes étranges aux frontières div en flottant

Question

Puis-je obtenir une explication de la raison pour laquelle ce code produit le résultat escompté? Et un moyen de résoudre le problème / de contourner le problème, si possible.

Je ne veux pas que Div 'z' et 'q' dépassent 'la bordure bleue div' à droite.

Ou

Je voudrais que div 'x' soit cohérent avec 'z' et 'q' et passe également par-dessus la bordure bleue droite.

<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

Quel navigateur avez-vous créé la capture d'écran? Si c'est IE, il y a un problème avec le modèle de boîte qui fait que la largeur de la bordure est ignorée lors du calcul de la largeur à 100%.

Vous créez un conteneur invisible pour dimensionner votre div interne ou redimensionnez votre div interne en conteneur.width -2.

Essayez également de supprimer width: 100%; du div.

Answer 2

La bordure rouge est en réalité à l'intérieur de la bordure bleue de votre image - mais je suppose que vous souhaitez augmenter la marge sur les conteneurs z et q ...

J'ai pris la liberté de mettre les attributs entre guillemets et de corriger les règles de style qui ont été déclarées à nouveau (margin et bottom-margin) - mais je m'excuse pour le format de ligne - je n'arrivais pas à obtenir rester dans le bloc de code sur ce forum jusqu'à ce que je retire les sauts de ligne:

<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

Pour ce scénario, il se peut que votre conception fonctionne mais puisse se casser très facilement, car vous n’avez ni effacé ni traité les éléments flottants.

Vous pouvez vous référer à l'exemple que j'ai créé. J'ai créé un violon fonctionnel pour ce genre de problèmes.

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>