代码如下,其实这个是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>
你把
<div class="two clearfix"></div>
这个div放到<div class="container clearfix">
之外试一试,就会发现two的高没了,就像这样:至于为什么包在container里面会有高度,那是因为被你的这个
<div class="one clearfix"></div>
里设置的height给撑起来了。建议可以看看html行级元素和块级元素。