clear:both

本文详细介绍了CSS中clear:both属性的作用及使用方法。当元素设置了浮动属性后,可能会对其后的元素布局造成影响,clear:both可以有效地解决这一问题。通过具体实例展示了如何应用此属性来避免浮动元素对后续内容的影响。

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

clear:both;
CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除clear:both;

例子:

<p style="float:left;width :100px;">这个是第1列,</p>
<p style="float:left;width :400px;">这个是第2列,</p>
<p >这个是列的下面。</p>

如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
<p style="float:left;width :100px;">这个是第1列,</p>
<p style="float:left;width :400px;">这个是第2列,</p>
<p clear:both;>这个是列的下面。</p>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值