首页 > 其他 > 详细

高度塌陷问题以及如何解决高度坍塌问题

时间:2019-08-19 01:37:03      阅读:124      评论:0      收藏:0      [点我收藏+]

      我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。

一、什么是高度塌陷?

通过下面的例子了解什么是高度塌陷。

在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1box设置边框宽度,而高度不去设置高度会由内容撑开

技术分享图片技术分享图片

但是当我们向盒子里面添加内容的时候<div class="box1">a</div>,就可以发现父元素被撑开了。

技术分享图片

在文档流定位中父元素的高度默认是被子元素撑开的高度。即子元素的高度就是父元素的高度

技术分享图片技术分享图片

当为父元素中的子元素设置了向浮动时。比如说为box1设置向左浮动。就会发现子元素的位置没变,但是父元素box发生了高度坍塌。

得出结论当为子元素设置浮动的时候,子元素就会完全脱离文档流,此时将会导致子元素无法撑开父元素,导致父元素的高度塌陷

技术分享图片技术分享图片

当再在父元素之下设置一个盒子box2,为box2设置高度80px和背景颜色。

技术分享图片

按理来说正常情况下,按照文档流排列,会是box的边框包裹着box1,box2在二者下方,如图一所示。

为box1设置浮动定位后,box1会脱离文档流,如上所示父元素随即会出现高度塌。这时候,box2盒子也会向上移动,造成布局混乱。如图二所示。

高度塌陷所造成的后果:由于父元素的高度塌陷,就会导致父元素之下的所有元素都会因此而向上移动,这样会导致页面混乱。不利于页面布局

技术分享图片                      技术分享图片


 

 

 

 

 

 

高度塌陷问题以及如何解决高度坍塌问题

原文:https://www.cnblogs.com/nyw1983/p/11374358.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!