[分享]css中bfc和格式化

在CSS中给我们带来了很多方便的布局方式，比如浮动、定位、flex布局等等，但是在实际项目中，样式的处理就不仅仅是这些简单的布局。在我们设计过程中，我们也需要注意到很多细节问题。其中，BFC和格式化就...

在CSS中给我们带来了很多方便的布局方式，比如浮动、定位、flex布局等等，但是在实际项目中，样式的处理就不仅仅是这些简单的布局。在我们设计过程中，我们也需要注意到很多细节问题。其中，BFC和格式化就是其中非常重要的内容。

.box {
  overflow: hidden;
} 

BFC是什么？全称为块级格式化上下文（Block Formatting Context）。简单概括说，就是一个独立的块级渲染区域，只有块级元素参与，它规定了内部子元素的渲染上下文。我们在实际开发中会发现，使用float浮动的元素会对其他元素的布局造成影响。这时候我们可以通过给父级元素添加BFC来产生新的块级格式化上下文，我们可以使用以下方法：

.box {
  overflow: hidden;
} 

上面代码中，我们通过添加overflow: hidden来创建一个新的块级格式化上下文，这样子元素就不会被浮动元素影响到了。

格式化是指对文本进行排版处理，主要有文字换行、字母间距、行高等等一些排版上的细节问题。当我们使用border的时候，会发现样式可能存在问题，这时候我们可以给其添加一些消除内边距的属性。

.box {
  box-sizing: border-box;
} 

上面代码中，我们给盒子添加了box-sizing属性，可以消除内边距，让样式不会因为内边距的差异而产生不同造成不必要的麻烦。

总而言之，在实际开发中，BFC和格式化这些细节问题我们需要给予关注，它们不仅能帮助我们更好地规范样式，也更能使得我们的项目更具备可读性和可维护性。