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的条件有很多,总结如下:
float
left
right
position
absolute
fixed
display
inline-block
table-cell
table-caption
flex
inline-flex
overflow
auto
scroll
hidden
###BFC的作用 在BFC的布局中,box会紧贴着BFC的左边缘,自上向下排列,即使存在浮动元素,这样就会出现浮动元素覆盖在box上的情况。 利用BFC,我们可以解决很多问题:
同属于一个BFC时,box垂直方向的距离会由各自的margin值决定,也就是会发生合并情况。解决方法就是将box置于不同的BFC中,这样margin值会分开计算,不会合并
在BFC中若有浮动元素,就会出现类似文字环绕的情况。这时只要为被覆盖的元素设置一个新的BFC即可解决问题
高度的塌陷。在一个BFC中,若都为浮动元素,则父元素的高度会塌陷,这时我们就需要为父元素设置BFC,就是常说的清除浮动。关于清除浮动的最佳实践如下:
.clearfix:before, .clearfix:after { content: ''; display: table } .clearfix:after{ clear: both }
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的条件有很多,总结如下:
float
属性为left
或right
;position
属性为absolute
或fixed
;display
属性为inline-block
、table-cell
、table-caption
、flex
或inline-flex
;overflow
属性为auto
、scroll
或hidden
###BFC的作用
在BFC的布局中,box会紧贴着BFC的左边缘,自上向下排列,即使存在浮动元素,这样就会出现浮动元素覆盖在box上的情况。
利用BFC,我们可以解决很多问题:
同属于一个BFC时,box垂直方向的距离会由各自的margin值决定,也就是会发生合并情况。解决方法就是将box置于不同的BFC中,这样margin值会分开计算,不会合并
在BFC中若有浮动元素,就会出现类似文字环绕的情况。这时只要为被覆盖的元素设置一个新的BFC即可解决问题
高度的塌陷。在一个BFC中,若都为浮动元素,则父元素的高度会塌陷,这时我们就需要为父元素设置BFC,就是常说的清除浮动。关于清除浮动的最佳实践如下:
.clearfix:before,
.clearfix:after {
content: '';
display: table
}
.clearfix:after{
clear: both
}
The text was updated successfully, but these errors were encountered: