高度塌陷问题
- 在浮动布局中，父元素的高度默认是被子元素撑开的,当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
- 解决办法1：BFC
- 解决办法2：clearfix
BFC
- BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域元素开启BFC后的特点：开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC：
将元素设置为行内块元素（不推荐）
将元素的overflow设置为一个非visible的值常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>Document</title><style>.outer{border: 10px red solid;float: left;display: inline-block;overflow: hidden;}.inner{width: 100px;height: 100px;background-color: #bfa;float: left;}</style></head><body><div class=\"outer\"><div class=\"inner\"></div></div><div style=\"width: 200px;height: 200px;background-color:yellow;\"></div></body></html>
- clear方法开启由于box1的浮动，导致box3位置上移,也就是box3收到了box1浮动的影响，位置发生了改变,如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
- 作用：清除浮动元素对当前元素所产生的影响
- 可选值：left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影
- both 清除两侧中最大影响的那侧
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
最终解决方案：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>Document</title><style><!-- clear 只针对浮动-->.box1{border: 10px red solid;/* overflow: hidden; */}.box2{width: 100px;height: 100px;background-color: #bfa;float: left;}.box3{clear: both;}.box1::after{content: \'\';clear: both;display: block;}</style></head><body><div class=\"box1\"><div class=\"box2\"></div><!-- <div class=\"box3\"></div> --></div></body></html>
- clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
.clearfix::before,.clearfix::after{context:\'\';display:table;clear:both;}
浮动总结：
通过浮动可以设置一些水平方向的布局
浮动可能会有高度塌陷的问题。
解决方法：
设置clear
设置clearfix属性
爱站程序员基地
