我的理解是,如果我浮动一个元素,下面的元素如果自己没有设置浮动,或者至少清除了浮动,最终会在这个元素后面消失。就像这个例子中的 "框三 "一样。但为什么 "框三 "的内容会从div中跳出来呢?数字3或盒子的任何潜在内容不是应该是 里面 "盒子三"?
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
}
.three {
opacity: 0.33
}
*编辑。
这是另一个例子来解释我不明白的问题. 为什么数字2不在蓝色框内? @Terry: 好吧,如果我把第一个盒子的宽度减小,内容就会跳起来一行,然后进入div。但是,为什么一开始就不在那里呢?因为盒子完全是空的,没有足够的空间吗?
<div class="box one">1</div>
<div class="box two">2</div>
.box {
font-size: 40px;
margin: 5px;
width: 300px;
height: 150px;
}
.one{
float: left;
border: 5px solid rgba(255, 154, 188, 0.9);
background-color: rgba(255, 165, 0, 0.25);
}
.two {
position: relative;
top: 170px;
border: 5px solid rgba(35, 154, 255, 0.5);
background-color: rgba(100, 165, 255, 0.25);
}
试试这个。
.box {
text-align: center;
font-size: 30px;
display:block;
color: red;
margin: 5px;
width: 200px;
height: 100px;
line-height:100px;
background: grey;
}
.one{
border:1px solid green;
display:block;
}
.two {
border: 1px solid red;
opacity: 0.66;
}
.three {
border: 1px solid yellow;
opacity: 0.66;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
是的,内容应该在框3里面,但是由于你把所有的框都设置成了同样的宽度,这就意味着框3中的内容不能被推到边上,而只能推到底部--如果你减少框3的宽度,就可以看到浮动与框3中的内容是如何交互的。
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
width: 25px;
}
.three {
opacity: 0.3;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3 random content here</div>