最近在学习JavaWeb,然后学习到Css,也有些自己的想法需要记录吧。太菜了,苦于不知道去哪里交流,就先开贴记录一下。
<div style="overflow: hidden">1.Float重叠问题 (猜测4和5重叠的原因是不同盒子里的内容本身是在不同位面的)</div>
<div style="width: 300px;border: 1px solid;">
1
<div style="float: left;height: 100px;width: 367px;border: 1px solid;">2对于div没有独占一行</div>3
<div style="height: 30px;border: 2px solid red;background-image: url('images/1301.jpg');width: 200px;">4我被float干到异次元了</div><!---->
<div style="height: 300px;border: 1px solid green;width: 50px;">我是五我是五我是五</div>
6
</div>
效果图
一开始我一直以为这是受了float影响。于是有了下面的测试
<div style="overflow: hidden">猜想证实</div>
<div style="border: 1px solid;height: 20px;width: 300px">问问我我我我额额额额额额额额额额额额额我我我</div>
<div style="border: 1px solid">456</div>
效果图
额。。。这跟float根本就没关系好吧!其实就是两个div内容重叠了,只是在float下看上去比较震撼。行吧,结案!
总结:不同盒子里的内容会产生重叠。同一上级的内容则不会!
欢迎拍砖!!!