关于float的说明

最新推荐文章于 2024-02-23 09:00:00 发布

weixin_34179762

最新推荐文章于 2024-02-23 09:00:00 发布

阅读量124

点赞数

关于float的说明

如图所示，蓝色的div和红色的div处于黑色的div（宽为500px)之中，其中蓝色的div设置了做浮动；

由图一（红色div的margin-top为10px，margin-left为200px）知：浮动之后蓝色div脱离了正常的文档流，而紧接着蓝色div的红色div则升了上去，这个蓝色div浮动层对于红色div的影响在于红色div内容显示方面：具体说就是红色div里的内容会以蓝色div的结尾为开始显示的地方，

对比图二和图三，图二红色的margin-top为75px，图三为76px；但是图二和图三的红色div的margin-left都是一样的为100px，由此可知以上结论的正确性；浮动的影响暂时只知道有这一点。由三张图也可知红色div的属性设置皆是无视浮起的蓝色div的（如margin-left仍然以黑色的div为依据的，并未受到蓝色div的影响）【补充】float只影响周围元素的显示，其他的方面(需要计算的地方等等)都可以忽略float的元素。

【新增：】浮动与清除浮动对元素的影响：

①，原始状态，三个浮动div元素，代码和效果如下，

<body style="width:300px;border:3px dashed black;">
<div style="border: 1px solid red;width:24%;float:left;">div1</div>
<div style="border: 1px solid blue;width:40%;float:left;">div2<br>div2</div>
<div style="border: 1px solid green;width:24%;float:left;">div3</div>
</body>

View Code

②，不清除浮动，代码和效果如下，注意div4的位置以及div4的边框(虚点)

<body style="width:300px;border:3px dashed black;">
<div style="border: 1px solid red;width:24%;float:left;">div1</div>
<div style="border: 1px solid blue;width:40%;float:left;">div2<br>div2</div>
<div style="border: 1px solid green;width:24%;float:left;">div3</div>
<div style="border:3px dotted #ff00b0">div4</div> <!--不清除浮动-->
</body>

View Code

③，清除浮动，代码和效果如下，注意div4的位置及边框，

<body style="width:300px;border:3px dashed black;">
<div style="border: 1px solid red;width:24%;float:left;">div1</div>
<div style="border: 1px solid blue;width:40%;float:left;">div2<br>div2</div>
<div style="border: 1px solid green;width:24%;float:left;">div3</div>
<div style="clear: both;border:3px dotted #ff00b0">div4</div> <!--清除浮动-->
</body>