页面布局高度塌陷问题和解决方案

产生高度塌陷的原因

 如果我们未对父元素设置高度，默认被子元素撑开，而一旦子元素脱离标准文档流，子元素不在文档流中占有原来的位置。此时父元素高度塌陷，导致布局混乱。

创建一个div1，再在其中创建一个子div2 ，代码如下。父元素不设置高度。子元素设置左浮动（脱离标准文档流）。

<style type="text/css">.div1{background-color: #0000FF;border: 2px solid red;       }.div2{background-color: #008000;width: 100px;height: 100px;float: left;}</style><body><div class="div1"><div class="div2"></div></div></body>

运行效果如图：父div高度塌陷。

解决方案
一、直接给父元素设置高度。父元素塌陷本就因为自身未设定高度。默认被子元素撑开。但这种方式显然不好，父元素高度设限，不能再随子元素高度扩张。

二、在浮动元素后边添加同级块元素。父元素因为子元素脱离文档流而高度塌陷。我们可以通过添加其他块状子元素，给定高度。把父元素高度撑起来。(在div2后添加div3)

<style type="text/css">.div1{background-color: #0000FF;border: 2px solid red;   }.div2{background-color: #008000;width: 100px;height: 100px;float: left;}.div3{     height: 100px;}</style><body><div class="div1"><div class="div2"></div>// 添加div3，设置高度和div2一致。用来把父元素div1撑起来<div class="div3"></div></div></body>

三、仍然是在浮动的子元素后添加块元素。但是该块元素不设置高度。通过clear 属性来解决。

 clear属性可以消除浮动元素对当前元素的浮动影响。 属性值：left, right, both 。分别消除左侧、右侧、俩侧浮动元素的影响。可以理解为：设置clear属性的元素的外上边框，正处于对应浮动元素的下边框，并会在上边框之上增加清除空间。所以div3设置clear:left 或 clear:both 。

<style type="text/css">.div1{background-color: #0000FF;border: 2px solid red;   }.div2{background-color: #008000;width: 100px;height: 100px;float: left;}.div3{     clear:left;}</style><body><div class="div1"><div class="div2"></div>//设置clear属性<div class="div3"></div></div></body>

但是以上是通过增加多余的元素来实现的（div3只是为了布局，撑高度，没有存在的意义）。我们可以为父元素设定after 伪类来为父元素实现，代码如下:

     .commonClear:after{content:"";display: block;clear: both;}<body>// commonClear可作为公用的，用来解决高度塌陷问题<div class="div1 commonClear"><div class="div2"></div></div></body>

四、每个元素都有隐藏的属性叫BFC（不详细描述）,该属性默认是关闭的。我们可以通过开启BFC来解决高度塌陷问题。

开启BFC的元素具有以下特性：
1、父子元素的垂直外边距不会重叠
2、元素不会被浮动元素覆盖。
3、元素可以包含浮动的子元素开启方式：
1、设置元素浮动，给父元素设置元素浮动，但这种方式会让父元素宽度丢失。父元素不单独跨一行，父元素同级下边的元素，无论是块元素还是行内元素，都会上移。不建议采用
2、设置元素的display属性为inline-block。 也会导致父元素宽度丢失。
3、设置overflow值为hidden（其他非visible值也可以。hidden 副作用最小）。
4、设置元素绝对定位（后续描述）需要注意的是。IE6没有BFC。但有另一个隐藏属性hasLayOut。在ie6可以通过设定zoom:1来开启hasLayOut。来解决高度塌陷问题。

页面布局高度塌陷问题和解决方案相关推荐

高度塌陷问题及其处理方法
目录一.出现高度塌陷原因二.高度塌陷解决方法解决方案一解决方案二解决方案三解决方案四一.出现高度塌陷原因一般情况下父元素的高度不是固定的,默认是被子元素撑开的,出现高度塌陷即是设置元素 ...
【CSS解决页面高度塌陷问题】
高度塌陷问题描述 1.页面高度塌陷问题 (1)产生原因 (2)正常标准流盒子 (3)子盒子浮动 (4)归纳总结 1.1.清除浮动本质 1.2 .清除浮动的方法 (1)方法一:额外标签法 (2)方法二: ...
css 高度塌陷_CSS高度塌陷问题解决方案
// 高度塌陷的解决方案一 .box1{border:10px red solid; /** 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context * 简 ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
解决高度塌陷的六种方法以及Grid网页布局补充
一,高度塌陷高度塌陷:在文档流中,若父元素未设置高度,那么父元素的高度默认是被子元素撑开的,即子元素多高,父元素就有多高.但是当子元素设置浮动之后,子元素就会完全脱离文档流,父元素还在文档流中,此时 ...
flex布局在iOS上出现高度塌陷
flex布局在iOS上出现高度塌陷问题: 常规盒子布局,在多数苹果机和安卓机上可以正常显示,在部分iOS上出现高度塌陷原因: 子元素高度加起来超过了父元素高度,从而触发坍缩解决办法: 给会出现高 ...
Android获取输入法高度——输入法与页面布局无缝切换
在QQ或者微信的聊天页面,当输入法和表情栏互相切换时,过度非常自然,而且表情栏高度刚好跟输入法一样.个人感觉这种用户体验特别的好,别看这个细节小,但代码实现处理起来还是有一定难度.今天我就带大家来实现 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
高度塌陷以及解决方法
高度塌陷问题在文档流中,父元素的高度默认被子元素撑开的,也就是说子元素多高父元素就多高,但是当为我们子元素设置浮动以后,子元素就会完全脱离文档流,此时会导致子元素无法撑开父元素的高度,导致父元素的高 ...

页面布局高度塌陷问题和解决方案

页面布局高度塌陷问题和解决方案

产生高度塌陷的原因

页面布局高度塌陷问题和解决方案相关推荐

最新文章

热门文章