美文网首页
CSS--BFC规则的作用

CSS--BFC规则的作用

作者: 栗子酥小小 | 来源:发表于2017-03-24 19:48 被阅读0次

    原理解释——block formatting context

    下列情况将创建一个块格式化上下文:

    • float的值不为none
    • position的值为absolute或fixed
    • overflow的值不为visible(默认就是visible,所以要改变必须显式设置)
    • display的值为table-cell, table-caption, flex, inline-flex, inline-block,中的任何一个
    • 根元素(其中除了inline-flex和inline-block的前后不会强制进行换行以外,其他都会三者都会使元素强制前后换行。)

    BFC应用要点:

    1. BFC不会和浮动元素重叠。
    • 例:普通浮动
    普通float.png
    • 例:将右边变成BFC(添加overflow:hidden)
    左边浮动,右边BFC.png
    • 解析:右边设置了BFC后,由于(1)BFC不能与浮动元素重叠,所以这里BFC自动避让开,就像两者接壤处有一条边界,BFC永远不会超过。并且如果想在BFC上设置margin-left使两者有间隔,这个将遏制必须大于图片的宽度,因为(2)每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    1. BFC会计算内部浮动元素的高度
    • 当父元素不是BFC,且未设置高度,而内部又有浮动元素时:
    无BFC的浮动.png
    • 如果把父元素改成BFC,它就会识别到内部浮动元素的高度,从而将自己的高度撑开,避免高度塌陷
    有BFC的浮动.png
    1. 利用上面的父容器会计算内部浮动元素高度的特性,可以使父元素形成闭合浮动,从而让浮动不影响其他元素,达到清楚浮动的目的。

    2. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

    3. BFC可以解决上下margin重叠的问题:

    • BFC内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,但只要两个中有一个不属于父BFC,或两者都创建了新的BFC,那么margin就不会发生重叠

    相关文章

      网友评论

          本文标题:CSS--BFC规则的作用

          本文链接:https://www.haomeiwen.com/subject/kjafottx.html