DIV标签设置浮动后，对下一个DIV标签width的影响

来源：互联网发布：用递归算法计算斐波拉编辑：程序博客网时间：2024/06/08 16:20

首先，先描述一下本人在学习DIV设置浮动时所遇到的问题，

后续会给出本人仅有的一些理解，若有错误之处，万望指出。谢谢

1.所遇问题

设置了两个div块，第一个div块设置float="left"向左浮动，第二个div块没有设置，问题是第二个div块的宽度并不是如代码中设置的那么宽。

设置div标签浮动*{margin:0px;padding:0px;}#one{width:120px;height:120px;background-color:#eee;border:1px solid #000;float:left;}#two{width:200px;height:120px;background-color:#eee;border:1px solid #000;}/*#three{width:200px;height:120px;background-color:#eee;border:1px solid #000;}*/

第一个div标签
    第二个div标签

将代码中注释掉的部分，去除注释，添加第三个div框，与第二个div的width属性相同，观察效果，得如图。

这时发现上面两个div框和第三个div框的宽度一致。

至于说为什么这样，具体原理还没搞懂。。。见谅，以下是我的一些浅薄理解

（1）第一个div标签设置float属性，对本身并没有影响，只会影响后续的div标签。

（2）第二个div标签的width并没有改变，只是被第一个div标签给遮挡住了(毕竟第一个浮动了。。)，其中第二个div标签中的文本内容会正常显示。

更改一下这几个div标签的width不难证明，假如第一个div标签的width比第二个大，或者第一个div的width小于第二个div的width，但是并不足以显示第二个div中的文本内容时，第二个标签内的文本会换到下一行。

我们会看到如下图：

设置div标签浮动*{margin:0px;padding:0px;}#one{width:190px;height:120px;background-color:#eee;border:1px solid #000;float:left;}#two{width:200px;height:120px;background-color:#eee;border:1px solid #000;}#three{width:200px;height:120px;background-color:#eee;border:1px solid #000;}

第一个div标签
    第二个div标签
    





    第三个div标签

虽然，第二个div中的文本内容像是另起了一行，但实际上并不是，仍然和上面的为一个块级元素。

只能理解到这一步了，还望各位不吝赐教。

阅读全文

0 0