今天的学习过程中学会了这样一个知识点。怎样解决高度塌陷和什么叫做BFC模式。
首先什么是高度塌陷？简单的来说就是在没有给父元素定义高度时，父元素的高度时靠子元素撑起来的，但是当子元素进行浮动以后就会发现父元素的高变为0了。这是为什么呢？我个人理解就是当子元素浮动后会飘到父元素的上层，这时父元素没有了内容，高度自然也就变成了0，就像这样：
通过学习我了解到了3种方法解决这个问题。
1：overflow：hidden
这种方法是直接给父元素添加overflow：hidden属性，给父元素开启一个BFC的模式，什么是BFC模式，文章后面会说明。就好比给父元素周围盖了一圈高高的墙，把子元素牢牢地锁在里面。无论你怎么飘都是在父元素里面。但是用到了overflow这个属性他会把超出父元素的部分全部裁剪掉。所以慎用。
*{ margin:0; padding:0}
.box1{ width:200px; border:#000 2px solid; margin:50px auto; overflow:hidden}
.box2,.box3{ width:50px; height:50px;}
.box2{ background:#0C0; float:left}
.box3{ background:#06F; float:right}
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
2:清除浮动
这个方法是在浮动的元素下方添加一个空的div，并且给这个空元素声明clear：both；height：0；overflow：hidden（font-size：0；）
这个方法是把浮动元素清除，把浮动起来的元素拽下来。
*{ margin:0; padding:0}
.box1{ width:200px; border:#000 2px solid; margin:50px auto;}
.box2,.box3{ width:50px; height:50px;}
.box2{ background:#0C0; float:left}
.box3{ background:#06F; float:right}
.box4{clear:both;height:0;overflow:hidden(font-size:0;)
}
效果跟第一种方法一样。
3万能清除浮动法
这个方法在样式里面直接添加这么一段代码:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }就可以达到解决高度塌陷的效果，但是这个方法用到了visibility:hidden这个属性，直接写在样式里面会影响到其他元素。这个属性和display：none差不多，display是直接把这个元素拿掉。而visibility是隐藏这个元素，但是位置大小还留在原处占着位置。所以为了不影响其他元素正常，建议把这个方法添加到父元素后面；
*{ margin:0; padding:0}
.box1{ width:200px; border:#000 2px solid; margin:50px auto;}
.box1:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.box2,.box3{ width:50px; height:50px;}
.box2{ background:#0C0; float:left}
.box3{ background:#06F; float:right}
效果跟第一种一样。三种方法各有利弊，根据需求选择最适合的方法。
4：BFC模式
BFC是Box和Formatting Context的简称直译过来就是块级格式化上下文。B指的就是盒子，FC就是W3C规范中的一种概念，它决定了元素如何定位以及和其他元素的关系和相互作用。它规定了盒子内部如何布局并且这个区域与外部毫不相关
BFC布局规则：
1.内部的盒子会从上而下一个接着一个放。
2.盒子的垂直距离由margin决定（两个都定义了margin，距离取最大值）；
3.BFC的区域相当于一个独立的容器，里面的元素影响不到外面的元素，反之如此。
4.计算BFC的高度时浮动元素也计算。
说白了BFC最大的作用就是给自己加了一道结界。谁也影响不到谁。
。
开启BFC的优点有自适应布局，清除浮动，防止margin重叠（上下margin相遇时取最大值但是添加BFC模式后距离取相加值）。
