關(guān)于CSS的浮動(dòng)后元素垂直位置的問(wèn)題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                font-family: "微軟雅黑";
            }
            .wrap {
                width: 300px;
                height: 400px;
                border: solid 2px red;
            }
            .a {
                width: 70px;
                height: 200px;
                background-color: orange;
                float: left;
            }
            .b {
                width: 150px;
                height: 50px;
                background-color: green;
                float: left;
            }
            .b2 {
                width: 70px;
                height: 150px;
                background-color: red;
                float: left;
            }
            .c {
                width: 100px;
                height: 150px;
                background-color: yellow;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="a"><span>A</span></div>
            <div class="b"><span>B</span></div>
            <div class="b2"><span>B2</span></div>
            <div class="c"><span>C</span></div>
        </div>
    </body>
</html>

JSbin

圖片描述

問(wèn)題：C元素的位置不是在A的左下方，而是在這個(gè)鬼地方，為什么會(huì)這樣？

注意到，C的上方和B2好像的平齊的。C元素被擠下去后的垂直位置和B2有關(guān)系嗎？
如果將B高度設(shè)置和A一樣，C就從最左邊排起了。
單單更改B2的高度，C垂直位置也會(huì)改變，但是保持C的上方和B2下方平齊。

圖片描述

隱約感覺(jué)C和B2的關(guān)系，但是看不出。
求大神解答或者相關(guān)鏈接供解讀，謝謝！

回答

編輯回答

青裙

http://www.zhangxinxu.com/wor...

2018年4月15日 06:09

編輯回答

哎呦喂

如果這個(gè)盒子是左浮動(dòng),而且在原文檔中較早的時(shí)間也生成了一些左浮動(dòng)盒子.對(duì)于這樣每一個(gè)較早的盒子.當(dāng)前盒子的左邊緣,必須在較早盒子的右邊緣的右邊.或其頂部必須低于較早的盒子的底部。類似的規(guī)則適用于右浮動(dòng)盒子。

2017年2月2日 17:13

編輯回答