zoukankan      html  css  js  c++  java
  • [css] BFC规则以及解决方法

    一、什么是BFC?

    BFC是页面上的独立渲染区域

    二、BFC产生规则

    1、根标签(html)

    2、float的值不为none

    3、overflow的值不为visible

    4、display的值为inline-block

    5、position的值为absolute或fixed

    三、BFC的特性

    1、属于同一个BFC的两个块元素,垂直margin兄弟关系会折叠(正数以大值为准,有负数正常加减),父子关系会塌陷。

    2、BFC区域不会与float的标签区域重叠。

    3、浮动的标签也会被计算BFC高度。

    4、BFC是独立容器,内部标签不会影响到外部标签。

    四、可以解决的问题

    1、外边距折叠/塌陷:

      父子关系在父级加overflow:hidden,父级加border,父级加高度

         关系给其中一个兄弟设置成独立的BFC。

    2、自适应两栏或三栏布局

      两栏:左边固定高度设置float,右边不设宽设置BFC

    <html>
    <head>
        <style>
            .left {
                width: 100px;
                height: 400px;
                background: red;
                float: left;
            }
            .right {
                height: 500px;
                background: yellow;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
    </html>
    两栏自适应

      三栏:左右固定高度设置float,中间不设宽设置BFC

    <html>
    <head>
        <style>
            .left {
                float: left;
                height: 500px;
                width: 150px;
                background: red;
            }
            .center {
                height: 600px;
                background: blue;
                overflow: hidden;
            }
            .right {
                float: right;
                height: 500px;
                width: 150px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="center"></div>
        <div class="mid"></div>
    </body>
    </html>
    三栏自适应

    3、防止文字环绕

      给文字设置成BFC可以解决文字环绕

    4、清除浮动

      给父级设置成BFC可以清除浮动,⑤浮动的标签也会被计算BFC高度。

  • 相关阅读:
    【模板】并查集
    P1063能量项链
    多维动归第一题
    7.14测试
    7.12测试
    7.10测试
    几种display:table-cell的应用
    instanceof和typeof的区别
    右侧悬浮广告
    JavaScript判断浏览器类型及版本
  • 原文地址:https://www.cnblogs.com/lv77/p/13865018.html
Copyright © 2011-2022 走看看