文档流中父元素高度是由子元素撑起的,当我们为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷
解决方法
开启BFC;开启BFC后
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素覆盖
开启BFC的元素可以包含浮动元素
开启BFC方法:
给父元素设置高度(把父元素高度写死,就不能随着子元素自动调节)
给父元素也添加浮动(会使父元素宽度的丢失,使其脱离文档流,导致下面的元素上移)
给父元素添加display:inline-block(会使父元素丢失宽度)
overflow
overflow: hidden;可能带来不可见问题
overflow: auto;溢出显示滚动条
在浮动元素后添加元素设置clear属性
br元素的clear属性
after伪类(最推荐的)
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，和第二种方法原理相同，可达到相同的效果，而且不会在页面中添加多余的div，这是最推荐的方式，几乎没有副作用