高度坍塌

高度坍塌

高度坍塌的根源:常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性: clear
默认值: none
left: 清除左浮动，i该元素必须出现在前面所有左浮动盒子的下方
right: 清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both: 清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

解决

1.clear 方法

添加一个子元素到最后的位置

.clearfix{
   clear:both;
}

或在父元素中添加.clearfix::after (伪元素选择器，为其添加一个最后一个子元素)

.clearfix::after{
   content:"";
   display:block; (默认是行盒改为块盒)
   clear:both;
}

创建BFC（块级格式上下文）

即将父元素变为BFC即可
常用（最小影响）

{
   overflow:hidden;
}

overflow:只要不是visible 就是BFC