浮动元素的特点~~~

本文详细介绍了CSS中的浮动属性,包括如何使用float设置元素左浮动和右浮动,以及浮动带来的特点和影响。浮动元素会脱离文档流,不再占据原来的位置,允许元素水平排列并创建各种布局。此外,还讨论了浮动对块级和行内元素的影响,以及其在页面布局中的作用。

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

通过浮动,可以使一个元素向其父元素的左侧或右侧移动

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

         可选值:

                     none 默认值,元素不浮动

                     left 元素向左浮动

                     right 元素向右浮动

             注意:元素设置为浮动以后,水平布局的等式不需要强制成立

             元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的 还在文档流中的元素会自动向上移动

浮动的特点:

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

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

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

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

                5.浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高。

注意:

元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生改变。

           1.脱离文档流的特点:

             块元素:

               1.块元素不再独占一行;

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

             行内元素:

                行内元素设置浮动后,变为块元素(可以设置宽高);

                脱离文档流后,就不用再区分行内元素和块元素。

 浮动的作用:

           1.让页面中的元素可以水平排列;

           2.通过浮动可以制作一些水平方向的布局。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值