2020.02.15

2020.02.15学习

高度塌陷，及其解决方案

高度塌陷的问题：
在文档流中父元素的高度是被子元素撑开的
但是子元素浮动后，子元素完全脱离父元素，父元素不会被撑开
由于父元素的高度塌陷了，父元素下面的所有的元素都会向上移动
我们可以将父元素的高度写死，避免高度塌陷的问题，一旦写死，父元素的高度不能自动适应子元素的高度

如果解决高度塌陷问题：
根据w3c的标准，在页面中元素都有一个隐含的属性叫 Block Formatting Context
简称BFC，该属性可设置打开或者关闭，默认是关闭的，当开启元素的BFC以后，元素将会有如下特性
1，父元素的垂直外边距不会个子元素重叠
2，开启BFC的元素不会被浮动元素所覆盖
3，开启BFC的元素可以包含动的子元素
如何开启BFC
1，设置元素浮动（可以撑开父元素，但是会导致父元素的宽度丢失，也会导致下边的元素上移）
2，设置元素绝对定位（）
3，设置元素inline-block（可以解决问题，但是会导致宽度丢失）
4，将元素的overflow设置一个非visible的值（推荐方式：将overflow设置为hidden）但是在ie6以下的浏览器中不支持BFC
在ie中虽然没有BFC，但是又hasLAyout，在ie6中解决这问题zoom：1；

清除浮动以及解决高度塌陷的最终方案（02.16学习）

有时候我们希望清除其他元素浮动对当前元素产生的影响，可以用clear来完成功能
clear可以用来清除其他元素对当前元素的影响
none：不清除
left：清除左侧
right：清除右侧
both: 全部，清除影响最大的元素
清除浮动以后，元素会回到浮动之前的位置

解决高度塌陷方案二：
可以直接在高度塌陷的父元素最后，添加一个空白的div
由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后对其进行清除浮动，这样可以通过这个空白的div来撑开的父元素的高度，基本没有副作用
虽然可以解决问题，但是会添加一个多余的结构

可以通过after伪类，选中指定元素的后边
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
这样做和添加一个div的原理一样，可以达到一个相同的效果
而且不会在页面中添加多余的div，这是我们最推荐的方式，几乎没有副作用