最近在学html的时候发现有时候自己的某个元素在设置浮动后，他的父级元素之间就开始乱跑了，为此，本人也去找了几种可以解决它的方法。
1.这第一种办法当然就是给父元素设置固高，因为父级元素之间乱动，就是因为没有了高度，但是这样子，高度塌陷问题解决了，但是效果不会太尽如人意，因为设置了固高后，父级元素在浏览器放大和缩小浏览的时候，不能自适应的变化，所以这个方法虽然简单，但一般不怎么用。
2.第二种方法是在父元素结束标签前加上一个属性为clear:both;的空div。这个方法就很好用了，只要加个空div就可以了，在设置一下属性，父元素就被撑开了。（如果空div是加在最后的可以写clear:left;）
3.通过伪元素给父元素撑高度。
伪元素选择器(行内元素)是在box内容之后加内容以下内容是卸载css的内容里的。box就是父级元素的类名。
.box：：after{
content:'';
height:0;
clear:both;
display:block;
}
4.把父元素变成BFC。
说到BFC ？？这是什么，我一开始听到的时候去搜了下，结果没咋看懂，看起来好难的样子，之后又花了点时间看了几篇别人总结的博客才大概懂了点。
BFC格式化块级模型（Block Formatting Context）
产生的情况（满足一个或多个即可)
1.根元素
2.float的值不为none
3.overflow的值不为visible
4.display的值为inline-block、table-cell、table-caption(为table时产生了一个匿名的table-cell，再生成的BFC)
5.position的值为absolute或fixed
在用其他方式生成时可能会出现其他的问题，比如：
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素
在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。w3cschool对此的解释是：在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。
而对于在浏览器中的BFC，会有：1.BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。2.生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
这样一来，BFC的用处也出来了：
1.让两个在同一BFC中的margin重叠的相邻元素处在不同的BFC中，就可以分开它们的margin了。
2.BFC包含浮动，这样也就可以用来解决上面的第一个问题了。
3.用它避免文字环绕，将文字部分设置为BFC,可以让字都跑到旁边排列成独立的部分。
4.多列布局时，浏览器会四舍五入，最后一列有时候就是上不去，这时就可以把它设置为另一个BFC，就可以让它不排斥排上去了。
