CSS之浮动

本文详细介绍了CSS中的浮动概念及其使用方式。浮动使元素脱离标准文档流,并向左或向右移动,直到遇到父元素边界或其他浮动元素。文章还解释了浮动元素与其他元素之间的相互作用以及如何利用浮动实现文字环绕效果。

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

1、所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。
2、浮动使用float属性。
可选值:
none:不浮动
left:向左浮动

right:向右浮动

3、当一个元素设置浮动后,会立即脱离文档流,它下边的元素会立即向上移动(即原文档流位置不再占用),元素浮动以后会尽量向左上或右上漂浮,直到遇到父元素边框或其他浮动元素停止。

4、如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素向上。

5、浮动元素不会超过其兄弟元素。

6、浮动的元素不会盖住其下面元素的文字,文字会自动环绕在浮动元素的周围。可以通过浮动设置文字环绕图片的效果。

7、在文档流中,子元素的宽度默认占父元素的全部,当元素设置为浮动以后,会完全脱离文档流,高度和宽度都由其内容撑开。

8、块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一
个块级元素。

9、当一个块级元素浮动以后,宽度会默认被内容撑开,所以当漂浮一个块级元
素时我们都会为其指定一个宽度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值