float对div宽度的影响

最新推荐文章于 2022-02-05 22:11:44 发布

转载最新推荐文章于 2022-02-05 22:11:44 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/jing31/blog/6601

本文探讨了CSS中float属性对div元素布局的影响，包括如何改变div的默认宽度及高度特性，以及float如何影响周围元素的排列方式。通过具体实例展示了如何利用float属性实现网页的左右分栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发现在float对div宽度的影响是显著的.

首先div的默认宽度是width:auto;意思是自动调整宽度.
在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
测试如下:

<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>

这个可能是为了clear而设定

第二div的默认高度也是height:auto.带不带float的div都一样,都是自动调整至最小化

第三div带float时,只要宽度不超过网页宽度,则其它元素包括div都要环绕它.或者也可以认为此时的带float的div是一个特殊的 padding
测试如下:

<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100%;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>
ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss

从以上你或者已经知道了一个重要的div+css的布局方法:
左右分开的网页,左侧的宽度固定,右侧的宽度随分辨率自动适应,并占满右侧的空间.
方法就是左侧的div用float:left.而右侧的div不带float.这样就可以实现这个效果了.

转载于:https://my.oschina.net/jing31/blog/6601