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

鍍金池/ 問答/HTML/ 在這個CSS例子中，.two的高是怎么來的。

在這個CSS例子中，.two的高是怎么來的。

代碼如下，其實這個是bootstrap中導航條組件的簡化版。我的問題是.two并沒有設(shè)置寬高，但無論是在chrome還是firefox，都有50px的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix::before,
        .clearfix::after {
            display: table;
            content: '';
        }
        .clearfix::after {
            clear: both;
        }
        .one {
            height: 50px;
            width: 50px;
            background-color: lightcoral;
            float: left;
        }
        .two {

        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="one clearfix"></div>
        <div class="two clearfix"></div>
    </div>
</body>
</html>
回答
編輯回答
尛曖昧

clipboard.png
你把<div class="two clearfix"></div>這個div放到<div class="container clearfix">之外試一試，就會發(fā)現(xiàn)two的高沒了，就像這樣：

clipboard.png
至于為什么包在container里面會有高度，那是因為被你的這個 <div class="one clearfix"></div>里設(shè)置的height給撐起來了。建議可以看看html行級元素和塊級元素。

2017年8月25日 20:34
編輯回答
怣痛

因為你的清除浮動效果是做在偽元素中的，這就相當于.two本來是空的，現(xiàn)在添加了兩個元素，一個在頭一個在尾，雖然實際上沒有內(nèi)容，但結(jié)構(gòu)上是存在的。你的清除浮動效果是.two的偽元素的外邊框頂著.one的下邊框，而clear的實現(xiàn)機制是：“clear 屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實現(xiàn)的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下?！?br>所以就撐開了.tow的高度咯...

2017年10月26日 21:50