CSS中的Clear

本文介绍了在使用div+css布局时如何解决浮动元素导致的布局问题,通过应用clear:both样式实现元素的正确排列,并提供了实例代码。

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

在当今web2.0时代,在设计网页的时候大家都会使用div+css进行布局,有点就不用多说了,自然有很多好处了,至少会比用table布局少些代码,而用div布局也有他们的不方便之处,就是比较复杂,尤其是多个div在一行显示,多个浏览器兼容等等,所以初学者还是尽量用table布局,待熟练了在用div.
现在说的是DIV+CSS中clear:both的作用,先看下例:
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}

<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >换一行</p>

以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

应改为:

如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个<P>加一个清除浮动。
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p style="clear:both;">另起一行</p>

这样可以正常显示了.

 

 

 

 

也可以参考http://www.webjx.com/css/divcss-5014.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值