BFC的形成条件和特性分析-创新互联

防止块级元素之间外边距塌陷的方法之一就是利用刚才说的第一个条件，也是同样的原理，形成一个BFC，在这里就不再说了。

1. 清除内部浮动元素对父级元素的影响
   eg：

   
       .out{        border: 1px solid blue;
       }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
       }

   效果图：

如果想让外部元素包含浮动元素，只需将外部元素设置为BFC

        .out{            overflow: auto;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }    

效果图：

1. 创建自适应布局
   如果我们想创建一个两列布局，其中左侧宽度不定，右侧宽度自适应占用剩下的空间，有一种方法就是利用浮动元素和BFC元素的相互作用实现的。

   html,body{        width: 100%;        height: 100%;
   }    .out{        background: blue;        width: 100%;        height: 100%;
       }    .f{        float: left;        margin-right: 20px;        height: 100%;        background: red;
       }    .r{        overflow: auto;        height: 100%;        background: yellow;
       }

   
   浮动元素
   
   

   效果图：

总结

BFC是很多CSS规范背后的原理，所以有必要搞清楚BFC。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。