css 高度塌陷_css浮动的特性,与浮动带来的影响以及如何清除浮动

本文介绍了CSS中浮动的相关知识。使用float可使块元素水平排列并脱离文档流,浮动元素有多种特性。子元素浮动会导致父元素高度塌陷,造成页面布局混乱。文中还给出了清除浮动的方法,如给父元素指定高度、开启BFC、使用clear属性等。

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

8d748959083aba7ffcf1549d896b5735.png

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开

如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动

css浮动的特性

1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围

2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素

3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素

4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤

5.块元素脱离文档流以后,默认的高度和宽度都丢失.高宽会被内容撑开(不再是默认的占父元素100%)(这是脱离文档流的特点,不仅仅是浮动才会这样)

6.内联元素脱离文档流后,会变成块元素(所有元素一旦脱离文档流.全都会变成块元素)

fb830e76ddea9940a5ef0c57c443acfb.png
box1左浮动
box2左浮动
box3右浮动(为什么不到右上角?)

浮动的影响与清除浮动

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。

但是子元素浮动后,因为脱离了文档流,所以子元素无法撑起父元素的高度.导致父元素高度消失.后面的元素都将会向上移动.最终导致页面布局混乱。

清除浮动方法1(针对父子元素):

给父元素指定一个高度直接写死(不推荐)

清除浮动方法2(针对父子元素):

给父元素开启BFC。

清除浮动方法3:清除浮动clear(针对兄弟元素)

clear可以用来清除其他浮动元素对当前元素的影响,仅仅是清除影响,清除浮动后.元素会回到其他元素浮动之前的位置

如果前面的元素是左浮动:clear:left

如果前面的元素是右浮动:clear:right

| 值 | 描述 |

| left | 在左侧不允许浮动元素。 |

| right | 在右侧不允许浮动元素。 |

| both | 在左右两侧均不允许浮动元素。(清除对元素影响最大的那个元素浮动) |

| none | 默认值。允许浮动元素出现在两侧。 |

| inherit | 规定应该从父元素继承 clear 属性的值。 |

清除浮动导致高度塌陷问题(父子元素):

可以直接在高度塌陷的父元素的最后,添加一个空白的div,并设置clear

但是此方法会添加冗余代码.因此可使用css进行添加伪元素:

.父元素:after{content:"";display:block;clear:both;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值