CSS如何清除浮动的影响、BFC
参考文章：
1.清除浮动：/a/1190000041226085
/m0_59897687/article/details/122522929
2.浮动与绝对定位：/csdn_ds/article/details/75145682
3.box-shadow：/dongtianee/p/4545340.html
4.BFC相关：/sinat_36422236/article/details/88763187
/qq_35430000/article/details/96436915
1.场景
举个例子，想实现如下效果:
自然会想到用float浮动使两个div在同一行，代码如下：
<style>.box{padding: 5px;width: 500px;background-color: rgb(244, 252, 225);border: 1px solid #000;}.left{width: 100px;height: 100px;background-color: red;float: left;}.right{width: 100px;height: 100px;background-color: red;float: right;}</style><body><div class="box"><div class="left"></div><div class="right"></div></div></body>
但此时会出现高度坍塌现象，效果如下：
关于浮动的详细特点介绍可参考/m0_59897687/article/details/122522929
2.产生这种现象的条件：
（1）父元素没有设置高度，高度由内容撑开
（2）子元素设置了浮动——float
3.产生这种现象的原因：
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，将无法撑起父元素的高度，使父元素高度丢失。之后的还在文档流中的元素会自动上移，导致页面的布局混乱。出现父元素高度坍塌的现象。
4.解决办法：
这里总结6种方法，并分别列出缺点
（1）将父级元素也设置为浮动
<style>.box{padding: 5px;width: 500px;background-color: rgb(244, 252, 225);border: 1px solid #000;float: left;}</style>
缺点：并没有从根本上解决问题，父级浮动可能又会影响爷爷级的布局，由此向上可能造成全部层级都需要调整。
（2）给父级元素增加定位absolute
<style>.box{padding: 5px;width: 500px;background-color: rgb(244, 252, 225);border: 1px solid #000;position: absolute;}</style>
缺点：也没有从根本上解决问题，因为position: absolute;也会脱离文档流，与第一种情况一样。
拓展：float浮动与绝对定位absolute的区别，参考/csdn_ds/article/details/75145682
（3）给父级元素设置相应的高度
<style>.box{padding: 5px;width: 500px;height: 100px;background-color: rgb(244, 252, 225);border: 1px solid #000;}</style>
缺点：不够灵活。高度需要随内容的改变而修改。
（4）给父级元素设置overflow: hidden;
overflow: hidden;表示溢出隐藏，给某个元素设置overflow: hidden;后，该元素的内容若超出了给定的宽度和高度属性，超出的部分将会被隐藏，不占位。
<style>.box{padding: 5px;width: 500px;background-color: rgb(244, 252, 225);border: 1px solid #000;overflow: hidden;}</style>
缺点：虽然解决了浮动的影响，但是会造成原来的一些内容被隐藏掉，比如：
1 盒子阴影
<style>.box{padding: 5px;width: 500px;background-color: rgb(244, 252, 225);border: 1px solid #000;overflow: hidden;}.left{width: 100px;height: 100px;background-color: red;box-shadow: 10px 10px 5px #aaa;float: left;}</style>
阴影偏移都是10px，但box的下边距只有5px，下阴影超出了box范围，在overflow: hidden; 的影响下只显示了一部分。
拓展：阴影在盒子外面，不占用盒子的布局空间，不算入盒子的总宽度和高度，所以不会撑大父元素，就会出现被遮盖现象。但相邻阴影之间可以遮盖。
参考文章：/dongtianee/p/4545340.html
2 当文本过长，且包含过长英文时，会出现英文文本被隐藏的情况
<div class="box"><div class="left"></div><div class="right"></div><div>csscsscsscsscsscsscsscsscsscsscsscsscsscsscsscss123123123css1css2css3css4</div></div>
拓展：在div css布局中，中文文字在div或任意盒子中超出设置宽度均会自动换行，但是遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。且中文后面接英文时，英文会另起一行。因此当设置溢出隐藏时，超出部分内容则会自动隐藏，可以通过设置word-wrap:break-word实现自动换行。
（5）末尾增加空元素进行清除
直接在末尾添加一个空的div并对其设置clear: both;
<style>.voidDiv{clear: both;}</style><body><div class="box"><div class="left"></div><div class="right"></div><div class="voidDiv"></div></div></body>
clear可能的值包括：
这里clear: both;就表示该元素的两侧都不允许出现浮动元素，那他只能往下移，进而撑开了父级盒子的高度。
缺点：增加了一个空标签，结构冗余，会增加页面的渲染负担，不过影响较小。
（6）使用伪类元素
使用伪类元素向末尾添加一个新的元素并将其设置为块元素并设置clear: both;
<style>.box::after{content: '';display: block;clear: both;}</style>
与（5）原理类似，都是在末尾添加一个没有内容的空元素，对其设置clear: both;但是伪元素不会出现在DOM中，不会改变文档内容，不是真正的元素。
总结：最常用的清除浮动的方式就是使用伪类元素。
5 BFC（Block Formatting Context） 块格式化上下文
其实在我们写页面的过程中，经常会用到BFC的知识， 只是不知道这个就属于BFC。
（1）BFC的主要特征
BFC就是页面上的一个独立的容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到容器内的子元素。内部的Box会在垂直方向上一个接一个的放置。（可以理解成块元素独占一行）盒子垂直方向的距离由margin决定，同一个BFC中的父子元素或相邻兄弟元素垂直方向上外边距margin会重叠。（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的。）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块。）BFC的区域不会与float box重叠。计算BFC的高度时，浮动元素也参与计算。
这里1.2.4.都没什么特殊的，主要注意3.5.6.
（2）BFC的触发条件
根元素，即HTML标签浮动元素：float值为left、rightoverflow值不为 visible，为auto、scroll、hiddendisplay值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid定位元素：position值为absolute、fixed
（3）BFC的应用场景
①解决外边距margin重叠问题
根据第3条特征，属于同一个BFC的相邻盒子的上下margin会发生折叠。我们可以让这两个盒子分别位于两个不同的BFC中，则可以有效的避免外边距塌陷的问题。
<style>.box1{margin-bottom: 10px;width: 100px;height: 100px;background-color: red;}.box2{margin-top: 10px;width: 100px;height: 100px;background-color: green;}</style><body><div class="box1"></div><div class="box2"></div></body>
如图所示，发生了margin重叠现象。现在两个盒子同处于body盒子中，环境一致。根据BFC，将两个盒子设置为两个不同BFC环境下的盒子，即可解决该问题。因此可以采用：
给box2设置浮动，触发box2的BFC：
<style>.box2{margin-top: 10px;width: 100px;height: 100px;background-color: green;float: left;}</style>
用新的div去包裹其中一个div并触发父级BFC：
用到了第1条特征，BFC盒子里面和外面的元素互不影响。
<style>.box1{margin-bottom: 10px;width: 100px;height: 100px;background-color: red;}.box2{margin-top: 10px;width: 100px;height: 100px;background-color: green;}.box{float: left;/* overflow: hidden; */}</style><body><div class="box1"></div><div class="box"><div class="box2"></div></div></body>
拓展：边距margin重叠解决方案/qq_35430000/article/details/96436915
②解决元素被浮动元素覆盖问题
如果一个元素设置了浮动，元素会脱离文档流，但是下面的元素没有设置浮动，下面的元素会顶上来，形成一个浮动覆盖的效果。根据第5条特征，我们可以通过给非浮动元素设置成BFC元素，可以防止被浮动元素覆盖。
<style>.box1{width: 100px;height: 100px;background-color: red;float: left;}.box2{width: 300px;height: 150px;background-color: green;}</style><body><div class="box1"></div><div class="box2"></div> </body>
开启box2的BFC，解决覆盖问题，比如给box2设置float: left;，可以看到，这其实是常用的分栏布局的方法。让多个子元素同时向左浮动就可以分栏布局。
<style>.box1{width: 100px;height: 100px;background-color: red;float: left;}.box2{width: 300px;height: 150px;background-color: green;float: left;}</style>
拓展：解决覆盖问题，只需要开启box2的BFC，除了给box2设置浮动也可以考虑其他方法，比如设置overflow: hidden;或display: inline-block;也可以实现，不过我们一般最常用浮动解决。
③利用BFC清除浮动
这里主要用到第6条特征。在我们上述提到的清除浮动的方法中，给父元素设置浮动，绝对定位，overflow: hidden;，都是通过使父级盒子变成一个BFC盒子，而BFC盒子会把内部的float盒子算进高度，顺势解决了高度塌陷问题。
