在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 關(guān)于CSS的浮動后元素垂直位置的問題

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

<!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

圖片描述

問題：C元素的位置不是在A的左下方，而是在這個鬼地方，為什么會這樣？

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

圖片描述

圖片描述

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

回答
編輯回答
青裙

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

2018年4月15日 06:09
編輯回答
哎呦喂

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

2017年2月2日 17:13
編輯回答
晚風眠

浮動就是這樣，比如你的圖一，b2后面的位置放不下了，就擠下去了。為什么不在A下邊，是因為B下邊能放，但C和B之間的空白，是因為B把整個區(qū)域都占用了。你可以檢查元素，看看ABC這些元素的占用的位置就能明白了。

2018年7月9日 09:01