^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 阿里云1核2g仅需102元/年,今日10点开抢

高度塌陷到底是什么如何解决?

阿里云双12限时特惠

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

但是当为子元素设置浮动后,子元素会完全脱离文档流,此时将导致子元素无法撑起父元素的高度,导致父元素的高度塌陷

解决办法:

1、我们可以将父元素的高度写死,但是会产生一个问题,就是父元素的高度无法自适应子元素的高度,所以不推荐这样处理

根据 W3C 标准,在页面中元素都有一个隐含的属性,叫做 Block Formatting Context ,简称 BFC,该属性可以设置打开或者关闭,默认是关闭的

当开启元素的 BFC 以后,元素将会具有如下的特性

1、父元素的垂直外边距不会和子元素重叠

2、开启 BFC 的元素不会被浮动元素所覆盖

3、开启 BFC 的元素可以包含浮动的子元素

开启办法:

1、设置元素浮动

-使用这种方式虽然可以撑开子元素,但是会导致父元素的高度丢失,也会导致下面的元素上移,不能解决问题

2、设置元素绝对定位

3、设置元素为 inline-block

-可以解决问题,但是会导致宽度丢失,不推荐使用

4、将元素的 overflow 设置为非 visible 的值

-推荐方式 讲 overflow 设置为 hidden,是副作用最小的开启 BFC 的方式(IE6 不支持 BFC,所以使用这种方式不支持 IE6,但是 IE6 也有一个类似 BFC 的属性 叫 haslayout,开启方式为设置 zoom:1)

--但是这种处理方式如果子元素中有相对定位的,如果在父元素外面会被隐藏

我们有时候希望清除其他元素浮动对当前元素的影响,这时候可以用 clear 来完成功能

left 清除左侧浮动元素对当前元素的影响,属性添加到当前元素上

both 清除对他影响最大的那个元素的浮动

清除后当前元素会回到其他元素浮动之前的位置

所以解决高度塌陷

1、将父元素的 overflow 设置为非 visible 的值

2、增加一个空白的 div 子元素 清除浮动 clear, 这种问题虽然可以解决问题,但是会添加多余的结构

可以使用父元素的伪类 .parent:after{content:"hello";display:block;clear:both}

hello 本身是内联元素没有 width 和 height,所以需要 display:block;转换为块元素

让小雨知道,这篇文章帮到了你
扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈