浮动的特点

本文详细介绍了CSS中的浮动属性,包括`none`、`left`和`right`三种可选值,以及浮动元素的特点。浮动元素会脱离文档流,不再占据原有空间,并向左或向右移动,同时不会超过前边的浮动元素。此外,文章还讨论了浮动元素与文字环绕效果的关系,以及如何利用浮动进行布局设计。
摘要由CSDN通过智能技术生成

使用float属性来设置元素的浮动

可选值:

-none:默认值,元素不浮动

-left:元素向左浮动

-right:元素向右浮动

浮动的特点:

1.浮动元素会完全脱离文档流,不再占据文档流中的位置

2.设置浮动以后元素会向父元素的左侧或右侧移动

3.浮动元素默认不会从父元素中移出

4.浮动元素向左或向右移动时,不会超过它前边的其它浮动元素

5.如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移

6.浮动元素不会超过它上边的浮动的兄弟元素,最多只能和它一样高

7.浮动元素不会盖住文字,可以利用浮动设置文字环绕的效果

--------------------------------------------------------------------------------------------------

元素脱离文档流的特点:

块元素:

1.块元素不再独占一行

2.脱离文档流后,块元素的高度和宽度被内容撑开

行内元素:

行元素脱离文档流后会变成块元素,特点和块元素一样

▲脱离文档流之后,不需要再区分行元素和块元素了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值