我该如何解决在“ Bluebox”之后无法使用clearfix的问题,我不想创建新的dif,我想使用:after或:: After在蓝色之后注入代码/清除。明确:如果我只是将其放在橙色框下,这两个命令都可以工作,但是我可以让它在没有div的bluebox之后发生吗?
#wrapper {
background: #000000;
height: 960px;
padding 20px;
}
#bluebox {
background: blue;
float: left;
}
#bluebox:after {
content: '';
display: block;
clear: both;
}
#orangebox {
background: orange;
float: left;
}
#greenbox {
background: green;
float: left;
}
.box {
height: 100px;
width: 100px;
}
<div id=wrapper>
<div id=bluebox class=box></div>
<div id=orangebox class=box></div>
<div id=greenbox class=box></div>
</div>
在过去的十年中,使用浮点数并清除它们太麻烦了-您应该研究一种较新的布局方法-例如-flex允许与您拥有的布局相同的布局,而没有清除浮点数的麻烦。
请注意,我在代码中添加了display:flex和justify-content:flex-start-所有这些操作都是允许flexbox布局并从左侧开始布局(如果您使用flex-end-那么它将使框与对)。
#wrapper {
background: #000000;
height: 960px;
padding 20px;
display: flex;
justify-content: flex-start;
}
#bluebox {
background: blue;
}
#orangebox {
background: orange;
}
#greenbox {
background: green;
}
.box {
height: 100px;
width: 100px;
}
<div id=wrapper>
<div id="bluebox" class="box"></div>
<div id="orangebox" class="box"></div>
<div id="greenbox" class="box"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句