浮动+BFC，稳拿面试官offer！

前端

2023-11-19 13:17:51

浮动和BFC：前端面试中的必备知识

在前端面试中，浮动和BFC这两个概念绝对是面试官的必考点。掌握这些概念不仅能帮助你轻松应对面试，还能为你的前端开发之路奠定坚实的基础。

什么是浮动？

想象一下，一个淘气的孩子在玩耍时不小心撞到了一群玩伴，导致整个队伍乱了阵脚。类似地，浮动是一种CSS属性，它允许元素脱离文档流，就像淘气的孩子一样，在父元素的边缘自由排列，而不会影响其他元素的位置或被其他元素影响。

浮动的类型

left： 元素浮动到左边
right： 元素浮动到右边
center： 元素水平居中
none： 元素不浮动

什么是BFC？

BFC（Block Formatting Context），中文翻译为块级格式化上下文，它是一个CSS概念，定义了一个独立的布局区域，就好比一个透明的盒子。盒子内的元素可以自由排列，不受盒子外元素的影响，反之亦然。

BFC的特点

独立性： BFC是一个独立的布局区域，它不会影响BFC外的元素，BFC外的元素也不会影响BFC中的元素。
垂直排列： BFC中的元素会垂直排列，并且元素之间的间距由元素的margin属性决定。
不影响外部布局： BFC中的元素不会影响BFC外的元素的布局，也不会被BFC外的元素影响。

浮动和BFC的应用

浮动和BFC在网页布局中有着广泛的应用，就好比装修中的必备工具，它们可以帮你打造出美观且功能强大的页面。

浮动： 多列布局、浮动菜单、浮动侧边栏等
BFC： 解决浮动元素引起的布局问题、创建垂直居中的元素、清除浮动等

面试中的常见问题

1. 什么是浮动？
2. 浮动元素有哪些特点？
3. 什么是BFC？
4. BFC有哪些特点？
5. 浮动和BFC有什么区别？
6. 浮动和BFC有哪些应用？

代码示例

为了加深理解，让我们通过一个代码示例来看看浮动和BFC是如何工作的：

HTML

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

CSS

.container {
  width: 500px;
  background-color: lightgray;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

.item-2 {
  float: right;
}

在这个示例中，.item-2元素浮动到父元素的右边，而其他元素仍然保持在原来的位置，不受影响。

BFC示例

.bfc {
  display: flex;
  height: 200px;
  background-color: lightgray;
}

.bfc-item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}