wordpress 导购站模板,什么网站广告做多,丹江口网站建设,芜湖南陵网站建设CSS高度塌陷#xff08;或称为高度坍塌#xff09;是指在某些特定情况下#xff0c;元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。
原因 高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正… CSS高度塌陷或称为高度坍塌是指在某些特定情况下元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。
原因 高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正常的文档流父元素无法正确计算其高度导致父元素高度塌陷。
产生高度塌陷的原因通常有两种情况:
子元素使用了浮动或者绝对定位导致父元素无法计算出子元素的高度。当父元素的高度没有设置时父元素的高度会自动调整为0从而导致子元素的高度也变为0。 style.father{border: 1px solid;}.son{width: 100px;height: 100px;background-color: red;/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 *//* position: absolute; */float: left; }/stylebodydiv classfatherdiv classson/div/div
/body
页面显示 如何解决
使父元素也脱离文档流
使用浮动布局将父元素也设置为浮动这样它会自动计算和包含浮动元素的高度。 .father{border: 2px solid blue;/* 使父元素也脱离文档流 */float: left;}.son{width: 100px;height: 100px;background-color: red;/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 *//* position: absolute; */float: left; } 当子元素是因为浮动的原因产生问题的时候我们也可以使用 overflow: hidden 来解决
overflow: hidden; 清除浮动(推荐)
在浮动元素后面添加一个带有clear属性的空元素使其在浮动元素下面从而触发父元素重新计算高度。在父元素上添加 clearfix 类名并在需要清除浮动的子元素前添加一个带clearfix::after伪元素的样式。
.clearfix::after {content: ;display: table;clear: both;
}div classfather clearfixdiv classson/div
/div 使用flex布局
使用flexbox布局可以自动解决高度塌陷问题。
.father {border: 2px solid blue;display: flex;
} 以上是一些常见的解决高度塌陷问题的方法具体应该根据实际情况选择适合的方法,还有哪些方法呢 欢迎补充。
