从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本文将为大家详细介绍“如何解决css中高度塌陷的问题”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何解决css中高度塌陷的问题”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
创新互联公司-专业网站定制、快速模板网站建设、高性价比温州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式温州网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖温州地区。费用合理售后完善,十余年实体公司更值得信赖。
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中高度塌陷的问题”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图