在文档流中,父元素高度默认是被子元素撑开的,也就是子元素多高,父元素就多高
但是当为子元素设置浮动后,子元素会完全脱离文档流,此时将导致子元素无法撑起父元素的高度,导致父元素的高度塌陷
解决办法:
1、我们可以将父元素的高度写死,但是会产生一个问题,就是父元素的高度无法自适应子元素的高度,所以不推荐这样处理
根据 W3C 标准,在页面中元素都有一个隐含的属性,叫做 Block Formatting Context ,简称 BFC,该属性可以设置打开或者关闭,默认是关闭的
当开启元素的 BFC 以后,元素将会具有如下的特性
1、父元素的垂直外边距不会和子元素重叠
2、开启 BFC 的元素不会被浮动元素所覆盖
3、开启 BFC 的元素可以包含浮动的子元素
开启办法:
1、设置元素浮动
-使用这种方式虽然可以撑开子元素,但是会导致父元素的高度丢失,也会导致下面的元素上移,不能解决问题
2、设置元素绝对定位
3、设置元素为 inline-block
-可以解决问题,但是会导致宽度丢失,不推荐使用
4、将元素的 overflow 设置为非 visible 的值
-推荐方式 讲 overflow 设置为 hidden,是副作用最小的开启 BFC 的方式(IE6 不支持 BFC,所以使用这种方式不支持 IE6,但是 IE6 也有一个类似 BFC 的属性 叫 haslayout,开启方式为设置 zoom:1)
--但是这种处理方式如果子元素中有相对定位的,如果在父元素外面会被隐藏
我们有时候希望清除其他元素浮动对当前元素的影响,这时候可以用 clear 来完成功能
left 清除左侧浮动元素对当前元素的影响,属性添加到当前元素上
both 清除对他影响最大的那个元素的浮动
清除后当前元素会回到其他元素浮动之前的位置
所以解决高度塌陷
1、将父元素的 overflow 设置为非 visible 的值
2、增加一个空白的 div 子元素 清除浮动 clear, 这种问题虽然可以解决问题,但是会添加多余的结构
可以使用父元素的伪类 .parent:after{content:"hello";display:block;clear:both}
hello 本身是内联元素没有 width 和 height,所以需要 display:block;转换为块元素