标签:code policy title body box content flow 解决方案 方式
因为box1加了float,导致box2的内容跑上去了。
所以需要清除浮动
解决方案1:给box1加 overflow:hidden,形成bfc
解决方案2:使用:after 即隔墙法 {content:’’; clear:both, display:block}
解决后的效果:
对应的代码
<body>
<div class=\"box1 \">
<div class=\"aaa\">box1的</div>
<div class=\"aaa\">box1的</div>
<div class=\"aaa\">box1的</div>
</div>
<div class=\"box2\">
<div class=\"bbb\">box2的</div>
<div class=\"bbb\">box2的</div>
<div class=\"bbb\">box2的</div>
</div>
</body>
<style>
.box1{
background-color:red;
overflow: hidden;
}
.box2{
background-color:green;
}
.aaa{
background-color:yellow;
float: left;
}
.bbb{
background-color:orange;
float: left
}
/* .box1:after {
content: \‘\‘;
clear: both;
display: block;
} */
</style>
标签:code policy title body box content flow 解决方案 方式
原文地址:https://www.cnblogs.com/tbonij51934/p/14965274.html