189 8069 5689

如何解决css中高度塌陷的问题

本文将为大家详细介绍“如何解决css中高度塌陷的问题”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何解决css中高度塌陷的问题”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

创新互联公司-专业网站定制、快速模板网站建设、高性价比温州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式温州网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖温州地区。费用合理售后完善,十余年实体公司更值得信赖。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

如果父元素只包含浮动元素,且父元素未设置高度和宽度,那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”。

如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了。

解决“高度塌陷”问题的方法:

方案一:给父元素一个固定的高度

缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。

方案二:给父元素添加属性 overflow: hidden;

优点:浏览器支持好,简单;

缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。

方案三:在子元素的末尾添加一个空的 p ,并设置下方样式

div{
clear: both;
height: 0;
overflow: hidden;
}

优点:所有浏览器都支持,并且容器溢出不会被裁剪;
缺点:在页面中添加无意义的div,容易造成代码冗余。

方案四:万能清除浮动法

在父元素中内容的最后添加一个伪元素来实现第三种方案的功能,具体设置样式如下:

父元素:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

优点:不会造成代码冗余,剩余代码性能优化,推荐使用。

如果你能读到这里,小编希望你对“如何解决css中高度塌陷的问题”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联行业资讯频道!


分享名称:如何解决css中高度塌陷的问题
本文URL:http://cdxtjz.com/article/jpdded.html

其他资讯