BFC

//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就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局就不会出现意外情况了。



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/prrety_girl/article/details/80691092
个人分类: 前端点
上一篇html页面跳转方法
下一篇模板引擎
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭