css-浮动造成的高度塌陷原因以及解决方法 清除浮动 BFC

高度塌陷：

子元素浮动之后 脱离文档流 不会把父元素撑开 造成父元素的高度塌陷

html

<div class="box1">
   <div class="box2"></div>
</div>

css

.box1{

  border:10px red solid;
}

.box2{

  width:100px;
  height:100px;
  background-color:#bfa;
  float:left;
}

运行结果：（本应该在父盒子内部的元素跑到了外部）

为什么会出现盒子塌陷：

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱

离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒

子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

解决办法：

1.给盒子添加固定的高度和宽度，缺点是非自适应

2.给外部的父盒子也添加浮动，让其脱离文档流，缺点是 不易维护，布局不好

3.盒子下方引入清除浮动块：    缺点是会引起不必要的冗余元素

4.给父元素添加 overflow:hidden；样式

.box1{

  border:10px red solid;

  overflow:hidden；
}

5.给父元素加伪元素（推荐使用）

.box1::after{

  content:'';  //加空白内容
  display:block;  //块级元素
  clear:both;  //清除浮动
}

运行结果：

BFC介绍

BFC就是块级格式上下文，是一个独立渲染区域 他丝毫不会影响到外部元素

BFC特性：

• 同一个BFC下margin会重叠
• 计算BFC高度时会算上浮动元素
• BFC不会影响到外部元素
• BFC内部元素是垂直排列的
• BFC区域不会与float元素重叠

创建BFC的方式：

外边距重叠现象：

块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，其大小为单个边距的最大值，如果这两个边距相等的话则仅为其中一个

 解决办法：

将两个div放置于不同的BFC中，那么两个BFC的内容不会互相干扰

浮动现象：

浮动元素并没有把父元素撑开

解决办法：

给父元素添加 overflow:hidden

正常元素被浮动元素覆盖：

浮动元素覆盖正常元素

解决办法：

给正常元素添加overflow:hidden 是两个元素互不干扰

BFC主要的作用是：

清除浮动

防止同一BFC容器中的相邻元素间的外边距重叠问题

阻止正常元素被浮动元素覆盖