CSS解决高度塌陷的方法

2023-11-11 13:37| 来源: 网络整理| 查看: 265

一、什么是高度塌陷

当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。

比如下面的效果：

.box1 { border: 10px red solid; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } .box3 { height: 100px; background-color: green; }

可以看到父元素高度塌陷后，下面的子元素都往上移动了，脱离了文档流。

二、解决高度塌陷的方法方法一:

给父元素设置固定的高度，固定高度后，父元素的高度就无法自适应子元素的高度了。弊端：但是不能让元素高度自适应了。

.box1 { border: 10px red solid; height:100px; }

$!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200301175220832.png$

方法二：

给父元素设置overflow：hidden，解决高度塌陷并能实现高度自适应的方法（遵循BFC的显示原则）弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；

.box1 { border: 10px red solid; overflow: hidden; } 方法三：

在浮动元素的下方添加一个空元素，并且给他设置一下属性。弊端：会添加很多空标记，增加结构负担，产生代码冗余；

.box1 { border: 10px red solid; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } .clear_fix{ /*空白div的属性*/ clear:both; /*清除两侧浮动*/ height:0; overflow:hidden; } /*添加空白div*/ 方法四：

display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；弊端：会改变当前元素的元素类型；

.box1 { border: 10px red solid; display: table; /* 改变元素类型为表格 */ } .box2 { width: 100px; height: 100px; background-color: blue; float: left; }

方法五：万能清除法

通过after伪类元素添加一个空白的块元素，css加下列属性，并给要清除的div加上clear_fix的类名。推荐使用的方式，没有什么副作用。

.box1 { border: 10px red solid; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } .clear_fix:after { /* 要加的属性 */ content: ""; /* 添加内容 */ clear: both; /* 清楚两侧浮动 */ display: block; /* 转换元素类型为块元素 */ height: 0; overflow: hidden; /* 溢出隐藏属性 */ visibility: hidden;/* 隐藏属性 */ }

技术总结：

父元素里的子元素会浮动的情况下，要注意高度塌陷问题并解决，这里推荐使用万能清除法解决

.clear_fix:after { content: ""; /* 添加内容 */ clear: both; /* 清楚两侧浮动 */ display: block; /* 转换元素类型为块元素 */ height: 0; overflow: hidden; /* 溢出隐藏属性 */ visibility: hidden;/* 隐藏属性 */ }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章