高度塌陷和BFC

文章目录

• 高度塌陷和BFC
• 前言
• 一、什么是高度塌陷？
• 二、BFC
• • 1.什么是BFC？
  • 2.如何开启BFC？
• 总结

前言

在网页的制作过程中，常常会因为元素的浮动而导致高度塌陷。本文介绍了高度塌陷通过使用BFC的基本解决方案。

一、什么是高度塌陷？

浮动元素父元素高度自适应(高度塌陷)，当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷。

二、BFC

1.什么是BFC？

BFC（Block Formatting Context） 块级格式化环境
- BFC是CSS中的一个隐含的属性
开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

2.如何开启BFC？

1、设置元素的浮动（不推荐）
float: left;
2、将元素设置为行内块元素（不推荐）
display: inline-block;
3、将元素的overflow设置为非visible的值
- 常用的方式 为元素设置 overflow: hidden 开启BFC
使其可以包含浮动元素

总结

以上是通过使用BFC解决高度塌陷的基础方法，后续会更新优化方案和最终方案。