(一)什么是盒子坍塌(高度坍塌)
本应该在父盒子内部的元素跑到了外部
高度坍塌也就是在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
(二)举个例子
代码:`
外部盒子
`
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
浮动流盒子
(三)解决办法
(1)推荐:在坍塌的盒子也就是父元素下面加个 ::after 伪类
/* .clearfix::after{
content: "";
display: block;
clear: both;
} */
效果:
这是一种纯CSS的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,推荐使用此方法来解决CSS盒子塌陷。
(2)可以在浮动流盒子下面加个新的常规流盒子,clear属性:both也是可以的