Html中浮动造成的边框塌陷的原因和解决办法

在一个大div里面，嵌套4个小div，设置第一个和第三个div左浮动，第二个和第四个右浮动。这个时候就会造成边框塌陷。

如图所示：

如果取消第4个div的右浮动，那么就不会造成边框塌陷：如图所示：

 

为什么会发生边框塌陷？

是因为我没有给大div设置高度，那么大（父）div的高度是由这四个小（子）div的高度撑起来的，但是子div脱离了标准文档流使得子元素无法撑起文档流的时候，就会边框塌陷。

什么原因会造成子div脱离标准文档流呢？

标准文档流，顾名思义，是要按照一定规矩排列的，默认的就是元素会从左至右，从上至下排列，块级会独占一行，行内元素会和小伙伴们共享一行。

本来在标准文档流下，各个元素相安无事，可突然有一天某个元素心想啊，我那么优秀，不该出现在这里啊，于是它成精了，它发现了一道大门走向另一个空间BFC。

BFC：直译为“块级格式化上下文”，这是一个独立的区域，这个区域与外部没有关系了，互不招惹，个人常用的会开启BFC空间的方式有

1.float的值不是none

2.position的值不为relative和static

3.display为inline-block

4.overflow不为visible

当然还有其他的方式会产生BFC，这里就不列举了。

先说说float，浮动，它会相对于自己最近的父元素进行定位，往左或者往右，这种方式会给我们布局带来便利，也可以变相的清除一些空文本给我们带来的不必要的空隙，但是使用它的时候需要注意清除它，不然由于它会脱离文档流的缘故，它的兄弟元素会跑到它原来的位置占位，或者它的父元素会因此而坍塌，这样会造成布局的混乱，就好比是在同一个位置，不同的时空，虽然浮动之后的元素还在，但是其他元素却看不见它，当然这个比喻并不怎么恰当，为了防止布局的混乱，也就是浮动之后带来的你不想要的效果，浮动之后一定要记得清除浮动，清除浮动常用的方式可以直接clear掉，当然也可以使用伪类:after来清除浮动，对于overflow:hidden,还有给浮动元素的父元素设置float来撑开父元素的高度，其原理也是开启BFC，而BFC在计算高度的时候，浮动元素也会参与其中。

再说说position，position定位也是一种脱离普通文档流的做法，它的定位方式是相对于最近的已经定位的祖先元素，常见的方式就是子绝父相，子元素绝对定位，父元素相对定位，使用这种方式可以让子元素相对于父元素做定位，使用position:absolute的时候记得设置x,y轴的值，也就是left,top（当然也可以rigth,top，具体情况自己决定）的值，目前我不知道有什么方式可以让position为absolute与fixed的元素再从自己开辟的BFC中出来，建议只在必须的情况下使用position定位，因为position定位使用多了，大家都脱离了普通文档流，可能会给后续的布局带来困难，既然说到了position，那就顺带再提提z-index，z-index相当于布局中的z轴，在使用了position:relative 或者absolute 或者fixed的时候z-index值便会生效，简单的说如果有几个元素重叠在了一起，这时z-index后面的值谁大，谁就会显示，其实其它元素也还在，只是被z-index值最大的那个元素挡住了，注意z-index后面的值没有单位的哈。

最后，关于display:inline-block，我最长用的时候无非就是让霸气的块级元素能够容忍其它元素和它共享一行，或者让谦逊的行类元素拥有能够设置width,height的能力。

解决边框塌陷的办法：

（1）在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理

          优点：简单，代码少，浏览器兼容性好。

          缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护

（2）给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

（3）结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。