float高度塌陷问题解决方案

Posted 2021-03-12 kukai

第一种方案 BFC(Block Formatting Context)

　　块级格式化环境/布局环境

　　BFC是CSS中的一个隐含属性，开启BFC该元素会变成一个独立的布局区域

　　元素开启BFC的特点：

　　1.开启BFC元素不会被浮动元素覆盖

　　2.开启BFC元素子元素和父元素外边距不会重叠　　

　　3.开启BFC的元素可以包含浮动子元素

　　开启BFC的方式：

　　1.设置元素的浮动(不推荐)

　　2.将元素设置为行内块元素(不推荐)

　　3.将元素的overflow设置为一个非visible的值（副作用较小）

　　　　常用方式为overflow:hidden/auto;

第二种方式：

　　clear属性作用:消除浮动元素对当前元素所产生的影响。

　　可选值：left： 消除左侧浮动元素对当前元素的影响

　　　　　　right：消除右侧浮动元素对当前元素的影响

　　　　　　both: 消除两侧中最大影响的那侧

　　示例

　　.box1::after {

　　content:"“;

　　display:block;

　　clear:both;

}