极客观点
项目管理
HarmonyOS
在实现圣杯布局的时候遇到了一个问题，使用传统方式实现圣杯布局，在设置中间的三个模块都向左浮动之后，设置.main模块宽度为100%以使它独自占据一行。这时候我想到可不可以给.main设置clear:both属性它周围不存在浮动元素达到同样的效果，发现不起作用，代码如下：
//HTML部分
<body>
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>//CSS部分代码
*{
margin: 0;
padding: 0;
}
body
{
min-width: 700px;
}
.header,.footer{
border: 1px solid #333;
background-color:white;
text-align: center;
}
.left,.main,.right{
min-height: 130px;
}
.container{
overflow:hidden;
border:2px solid blue;
}
.left{
width:200px;
background:yellow;
}
.right{
width:220px;
background:pink;
}
.main{
width:100%; //如果设置clear:both;的话不起作用
background-color:blue;
}
.left,.main,.right {
float:left;
}
.footer {
clear:both;
}希望得到大家的解答。
这是因为让
.mainfloat 起来后，有两个特性：不指定宽度的话就会按 shrink-to-fit 计算，即尽可能缩小。
宣布了新的 BFC，所以 clear 对其它两个 float 不起作用。
所以只需要取消
.main的 float 即可，宽度会自动恢复为 100%。也不需要 clear ，因为后面的 float 是从.main下方开始计算。