在这个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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你把
<div class="two clearfix"></div>这个div放到<div class="container clearfix">之外试一试，就会发现two的高没了，就像这样：至于为什么包在container里面会有高度，那是因为被你的这个
<div class="one clearfix"></div>里设置的height给撑起来了。建议可以看看html行级元素和块级元素。因为你的清除浮动效果是做在伪元素中的，这就相当于.two本来是空的，现在添加了两个元素，一个在头一个在尾，虽然实际上没有内容，但结构上是存在的。你的清除浮动效果是.two的伪元素的外边框顶着.one的下边框，而clear的实现机制是：“clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。”
所以就撑开了.tow的高度咯...