鍍金池/ 問(wèn)答/HTML/ 左邊浮動(dòng)，右邊用margin-left:;充滿，為什么清浮動(dòng)后，右邊的“1111

左邊浮動(dòng)，右邊用margin-left:;充滿，為什么清浮動(dòng)后，右邊的“111111”會(huì)和左邊一樣高？？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title></title>
    <style>
        .clearfix{display: block;}
        .clearfix:after{zoom:1;display: block;content: '';clear: both;}
        .container{width: 300px;background: yellow;}
        .left{float: left;width: 200px;height: 200px;background: black;}
        .right{margin-left: 200px;background: red;word-break: break-word;}
        .pull-left{float: left;}
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="left"></div>
        <div class="right ">
            <div class="clearfix">
                <div class="pull-left">1111111111111</div>
            </div>
            <div class="clearfix">
                <div class="pull-left">21222222222</div>
            </div>
        </div>
    </div>
</body>
</html>

為什么‘222222222’那一塊不是緊跟著‘1111111’，變現(xiàn)為‘111111111111’和‘left’高度一樣？圖片描述

回答
編輯回答
怪痞

圖片描述

你想要的是這樣嗎？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title></title>
    <style>
        .clearfix {
            display: block;
        }

        .clearfix:after {
            zoom: 1;
            display: block;
            content: '';
            clear: both;
        }

        .container {
            width: 300px;
            background: yellow;
        }

        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: black;
        }

        .right {
            margin-left: 200px;
            background: red;
            word-break: break-word;
        }

        .pull-left {
            float: left;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="left"></div>
        <div class="right ">
            <div class="clearfix">
                <div>1111111111111</div>
                <div>21222222222</div>
            </div>
        </div>
    </div>
</body>
</html>
2018年9月16日 09:37