We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在页面布局的过程中，我们经常会遇到一些奇怪的情况，比如元素的高度消失了、两栏布局无法自适应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响而导致的。在这里，就涉及到了BFC（Block Formatting Context）的概念。
BFC（块级格式化上下文）是页面中一块独立的渲染区域，具有一套独立的渲染规则：
BFC的目的是形成一个相对于外界完全独立的空间，使内部的子元素不会影响到外部的元素。
触发BFC的条件包含但不限于：
利用BFC的特性，我们可以在以下场景中应用BFC：
<style> .container { overflow: hidden; /* 触发BFC */ } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <div class="container"> <p>Haha</p> </div> <p>Hehe</p> </body>
在没有触发BFC的情况下，两个p元素之间的距离为100px，发生了margin重叠（塌陷）。通过给包含p元素的容器触发BFC，两个p元素不再属于同一个BFC，从而避免了margin重叠。
<style> .parent { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; } </style> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </body>
通过触发parent元素生成BFC，可以清除内部浮动的影响，从而使parent元素具有高度。
.parent { overflow: hidden; /* 触发BFC */ }
<style> .wrapper { width: 300px; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="wrapper"> <div class="aside"></div> <div class="main"></div> </div> </body>
在不触发BFC的情况下，.main元素的左边会与.wrapper元素的左边界相接触，从而无法实现两栏布局。
通过触发.main元素生成BFC，.main元素的左边不再与.wrapper元素的左边界相接触，从而实现自适应多栏布局。
.main { overflow: hidden; /* 触发BFC */ }
通过上面的例子，我们可以看到BFC的实际效果就是形成一个页面中的独立容器，里面的子元素不影响外部的元素，反之亦然。BFC为我们解决了很多布局上的问题，提供了更灵活和可靠的布局手段。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
面试官：谈谈你对BFC的理解？
一、是什么
在页面布局的过程中，我们经常会遇到一些奇怪的情况，比如元素的高度消失了、两栏布局无法自适应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响而导致的。在这里，就涉及到了BFC（Block Formatting Context）的概念。
BFC（块级格式化上下文）是页面中一块独立的渲染区域，具有一套独立的渲染规则：
BFC的目的是形成一个相对于外界完全独立的空间，使内部的子元素不会影响到外部的元素。
二、触发条件
触发BFC的条件包含但不限于：
三、应用场景
利用BFC的特性，我们可以在以下场景中应用BFC：
1. 防止margin重叠（塌陷）
在没有触发BFC的情况下，两个p元素之间的距离为100px，发生了margin重叠（塌陷）。通过给包含p元素的容器触发BFC，两个p元素不再属于同一个BFC，从而避免了margin重叠。
2. 清除内部浮动
通过触发parent元素生成BFC，可以清除内部浮动的影响，从而使parent元素具有高度。
3. 自适应多栏布局
在不触发BFC的情况下，.main元素的左边会与.wrapper元素的左边界相接触，从而无法实现两栏布局。
通过触发.main元素生成BFC，.main元素的左边不再与.wrapper元素的左边界相接触，从而实现自适应多栏布局。
小结
通过上面的例子，我们可以看到BFC的实际效果就是形成一个页面中的独立容器，里面的子元素不影响外部的元素，反之亦然。BFC为我们解决了很多布局上的问题，提供了更灵活和可靠的布局手段。
参考文献
The text was updated successfully, but these errors were encountered: