在这个CSS例子中,.two的高是怎么来的。

代码如下,其实这个是bootstrap中导航条组件的简化版。我的问题是.two并没有设置宽高,但无论是在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>
阅读 2.4k
2 个回答

clipboard.png
你把<div class="two clearfix"></div>这个div放到<div class="container clearfix">之外试一试,就会发现two的高没了,就像这样:

clipboard.png
至于为什么包在container里面会有高度,那是因为被你的这个 <div class="one clearfix"></div>里设置的height给撑起来了。建议可以看看html行级元素和块级元素。

新手上路,请多包涵

因为你的清除浮动效果是做在伪元素中的,这就相当于.two本来是空的,现在添加了两个元素,一个在头一个在尾,虽然实际上没有内容,但结构上是存在的。你的清除浮动效果是.two的伪元素的外边框顶着.one的下边框,而clear的实现机制是:“clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。”
所以就撑开了.tow的高度咯...

推荐问题