//css重点内容为布局+盒子模型。
BFC(Block formatting context)块级格式化上下文
1. 产生BFC的条件
display属性为block,list-item,table的元素,会产生BFC
2. 触发条件的几种情况,来产生BFC
-float属性不为none
-position为absolute或fixed
-display为inline-block,table-cell,table-caption,flex,inline-flex
-overflow不为visible
3. BFC元素具有的特性
-盒子垂直排列
-盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
-在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)
1. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
2. 计算BFC的高度时,自然也会检测浮动活着定位的盒子高度。
3. 他是一个独立的渲染区域,只有Block-level box参与,他规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
白话文:孩子在家里愿意怎么折腾都行,但是出了家门,你就得乖乖的,不能影响外面的任何人。
4. BFC的主要用途
-清楚元素内部浮动
-解决外边距合并问题
-制作右侧自适应盒子问题
BFC总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局就不会出现意外情况了。
扫一扫,支持我一下^_^