浮动

本文介绍了CSS中float属性的应用技巧,包括文本环绕效果及清除浮动的方法。同时,还详细解释了如何通过clear和overflow属性扩展盒子高度并解决溢出问题。

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

-- float的值:
- left:文本流向对象的右边《本身不动》
- float:left;


- right:文本流向对象的左边《本身右移》
- float:right;


-- 图片和文字在一起显示:使用float的值进行操作。




--清除浮动:

- clear的值:
- left:在左侧不允许浮动元素。
- right:在右侧不允许浮动元素。
- both:在左、右两侧不允许浮动元素。
- none:默认值,允许浮动元素出现在两侧。


例:(使用伪类清除浮动)
.clearFix:after{
content:"";
display:inline-block;
clear:both;
}






-- 扩展盒子的高度:clear;
增加一个div:
例:<div class="clear"></div>

.clear{clear:both;margin:0px;padding:0px;}






-- 溢出处理:
overflow:
值:
- visible:默认值,内容不会被修剪,会呈现在盒子之外。
- hidden:内容会被修剪,并且其余内容是不可见的。
- scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。<任何情况下都有滚动条>
- auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。《内容超出边框的范围就出现滚动条》





-- overflow 也可以扩展盒子的高度:
- 代码:在最外层div中设置宽度和overflow的值hidden;
div{width:600px;overflow:hidden;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值