解决高度塌陷问题

yiyi爱编程 2023-01-13 03:28:00

课时名称	课时知识点
解决高度塌陷问题	解决高度塌陷问题

...全文

58 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

这是一些前端容易问到的问题，大家一起共勉。主要为大家解决一些平常经常遇到的问题，大家一起解决，一起指正。

针对CSS中高度塌陷的问题进行描述，并给出了多种解决办法，跟给出了适合任何环境的万能清除法。可以建立统一适用的公共样式表，方便以后进行使用

什么是高度塌陷？当父元素高度自适应，子元素浮动后，造成父元素高度为0，称为高度塌陷。 高度塌陷怎么解决？方法一：给父元素一个固定的高度缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。方法二：给父元素添加属性 overflow: hidden; 优点：浏览器支持好，简单；缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。方法三：在子元素的末尾添加一个空的 div ，并设置下方样式 div{ clear: both; height: 0; overflow: hidden; } 优点：所有浏览器都支持，并且容器溢出不会

1. 高度塌陷 在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高，父元素就多高。但是，当为子元素设置浮动后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">

父元素在文档流中默认的高度是由子元素撑开的，由于子元素添加浮动后会脱离文档流，无法撑起父元素，会导致父元素的高度塌陷。本文解释了CSS高度塌陷的原因及高度塌陷解决方案。

波哥的课程社区_NO_1

1

社区成员

124

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章