高度塌陷
在文档中子元素把父元素撑开,子元素有多高父元素就有多高,当给子元素设置浮动后,子元素脱离文档流,父元素就会造成高度塌陷问题。
造成的问题:由于父元素高度塌陷,则父元素下的所有元素都会向上移动,这样会导致页面布局混乱。
解决方法:
- 可以给父元素设置高度 。问题:父元素的高度将不能自动适应子元素的高度,不推荐使用。
- 开启BFC 添加一个属性 overflow:hidden
- 使用Clear 清除浮动影响
BFC
根据W3C的标准,页面中元素都有一个隐含的属性叫Block Formatting Context ,简称BFC,该属性该属性可以设置打开或关闭,默认是关闭的。
当开启元素的BFC以后,元素会具有以下的特性:
- 父元素的垂直外边距不会和子元素重叠。
- 开启BFC的元素不会被浮动元素覆盖。
- 开启BFC的元素可以包含浮动的子元素
如何开启BFC:
- 设置元素浮动
- 设置元素决对定位
- 设置元素为inline-block
- 将元素的overflow设置为一个非visible的值
将overflow设置为hidden是副作用最小的开启BFC的方式。
Clear
清楚其他浮动元素对当前元素影响。
可选值:
left: 清除左侧浮动元素对当前元素的影响。
right 清除右侧浮动元素对当前元素的影响。
both 在左右两侧元素对当前元素的影响。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
解决问题:高度塌陷
可以直接在高度的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的,然后对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用,但这种方式会在页面中添加多余的结构。
使用after伪类,选中元素后面,添加一个空白的块元素,然后对其清除浮动,和上面添加一个div效果一样,几乎没有福作用
.box:after{
content:"word";
/*转为块元素*/
display:block;
/*清除浮动*/
clear:both;
}