深入理解BFC和外边距合并(MarginCollapse)_html/css_WEB-ITnose

一、什么是BFC？

1.BFC的概念

BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。

2.BFC布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算

二、怎么产生BFC?

根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

三、BFC的作用及原理

1.自适应布局

     body {        width: 300px;        position: relative;    }     .aside {        width: 100px;        height: 150px;        float: left;        background: #f66;    }     .main {        height: 200px;        background: #fcc;    }      


      
查看更多关于深入理解BFC和外边距合并(MarginCollapse)_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109931