盒子塌陷问题 BFC问题

盒子塌陷 问题中

先我什么都盒子会塌陷

当父盒子内元素浮动后脱离标准流，父盒子没有了儿子支撑，就形成了高度塌陷

解决塌陷的方法：

1，给父盒子设置高度，让其直接撑开（缺点容易使盒子固定 不同比例下用户观感不好）

2 ，让父盒子浮动{

3，设置清除伪元素的属性

overf hidden （缺点容易删除需要的内容）

overflow:auto; 有可能出现滚动条，影响美观

给父盒子设置clearfix

• BFC区域

BFC 块格式化上下文 是块盒子布局移动的区域，也是浮动元素与其他元素交互的区域

html标签是BFC

浮动元素是BFC

行内块元素是BFC

BFC的特点：BFC区域会默认包裹其子元素，标准流，浮动

• 设置非 float： none （默认） 的浮动
• 设置非 overflow： visible （默认） 控制内容溢出元素框时显示的方式
• 设置非 position：static（默认） / relative 的定位类型
• 设置display：inline-block / table-cell / table-caption 为任何一个

BFC就是创建一块不受干扰也不被干扰的区域