【CSS】Day4--简述你对BFC规范的理解⭐️⭐️

[chenliqio]

一、浮动布局的高度塌陷

在浮动布局中，父元素的高度是直接由子元素撑开的，由于子元素浮动后，会完全脱离文档流，导致子元素不能撑起父元素的高度，父元素的高度丢失。

解决办法：可以是为父元素添加固定的高度，此时父元素便不能跟随子元素高度的改变而改变，不是很灵活。第二种方式就是开启父元素的BFC。

二、BFC

1. 块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
   通俗来讲，BFC是CSS中的一个隐藏属性，开启BFC属性的元素会变成一个独立的区域。

2. 开启BFC的特点

   • 开启BFC属性后的元素，不会被浮动元素所覆盖；
   • 子元素和父元素的外边距不会重叠；
   • 开启BFC的元素可以包含浮动的子元素。（可以用来解决高度塌陷）

3. 如何开启BFC属性

   • 设置元素浮动 副作用：父元素的宽度丢失，宽高都由子元素撑开；
   • 将元素设置为行类块元素 副作用：父元素的宽度丢失，宽高都由子元素撑开；
   • 将元素的overflow设置为一个非visible的值，设置为auto，没有上述的副作用，其他副作用较小，是最推荐的方式。