【CSS】浅谈css中格式化上下文BFC、IFC(一)
来源:互联网 发布:淘宝u站管理中心 编辑:程序博客网 时间:2024/06/05 22:50
格式化上下文
格式化上下文指的是元素所处的环境以及初始化。这里的初始化就是所谓的格式化(如手机的重置,恢复出厂设置),环境也称为上下文(不同的环境会有不同的结果)。
格式化上下文分为:
- 块格式化上下文
- 行内格式化上下文
从Overflow清除浮动开始
- visible:不对超出的内容做处理
- hidden:剪切超出内容(超出部分隐藏)
- scroll:不管内容是否超出,添加滚动条
- auto:超出的内容以卷动滚动条的方式呈现
<style>.box{ overflow:hidden;}.item{ float:left; width:100px; height:100px; background-color:pink;}</style><body><div class='box'> <div class='item'></div></div></body>
之所以给父元素.box添加overflow,是因为它的子元素.item浮动了。
如果不添加overflow,子元素.item就会超出.box的内容区域,也就是说父元素无法自适应子元素的大小。
Block Formatting Context
如标题,BFC就是它的缩写。他的中文名叫:块(级)格式化上下文
1.BFC的特点
- 在一个BFC中,块框会朝着垂直方向一个接一个地排列,从包含块的顶部开始。如果两个以及两个以上的框,在同一个块级格式化上下文中,那么他们相邻垂直方向的margin会合并成一个(按照较大的margin计算)。这里牵扯到margin外边距折叠的问题。
- 在BFC中,盒子从包含块最左边开始摆放。如果该元素创建了一个新的BFC,那么该盒子自身的宽度会因为浮动而变化,变化的大小与浮动元素相关。
- 在一个BFC中,囊括块里面的所有元素,但不囊括创建了新BFC的元素。
- 当一个框创建一个BFC时,他将包括浮动的元素(这也是为什么父元素设置overflow:hidden;可以自适应浮动元素的原因)。
2.如何创建一个BFC
- 根元素(html)自身就是一个BFC
- 浮动float值不为none
- 绝对定位position值为absolute、fixed的元素
- display值不为block的元素
- 表格单元格display为table-cell的元素
- 表格标题diaplay为table-caption的元素
- overflow值不为visible的元素
- 弹性盒子display为flex、inline-flex的元素
3.BFC特性验证
特性一: 垂直外边距折叠(margin折叠)
<style> li{ margin:20px 0; }</style>
以上111111和222222之间的margin折叠了。
特性二:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .item1{ width: 100px; height: 100px; float: left; margin-left: 10px; background-color: pink; } .item2{ width: 200px; height: 100px; background: orange; } </style></head><body><div class="box"> <div class="item1">item1</div> <div class="item2">item2</div></div></body></html>
可以看到,item2还是靠到了包含块的最左边。
我们给item2加一个overflow:hidden;之后,创建了一个新的BFC
以上可以应用在哪里呢?可以应用在如下场面
如果不加overflow就会变成这样
但是我们想要的排版效果是这样
放在之前,我们可以只给橙色块加margin-left 这里需要注意的是,如果采用margin-left,则需要算上img块的宽度。,但是了解BFC之后,我们可以用overflow或者float来解决。具体代码不再赘述,原理就是把橙色块变成一个BFC;。
但是这种效果如果不设置宽度的话,用float和display:inline-block;实现,就会出现一些奇怪的问题,float和display:inline-block的话橙色块会掉下来
而使用display:block;
但是如果使用overflow:hidden就不会
其他特性不再一一验证。有兴趣可以自己验证。
挚谢阅读。
敬请期待下一期:
【CSS】浅谈css中格式化上下文BFC、IFC(二)
- 【CSS】浅谈css中格式化上下文BFC、IFC(一)
- 【CSS】浅谈css中格式化上下文BFC、IFC(二)
- css中BFC格式化上下文
- CSS格式化上下文(BFC)
- CSS中包含块,层叠上下文,BFC,IFC究竟是什么?
- CSS BFC(块级格式化上下文)
- CSS属性、BFC、IFC
- CSS--BFC(块级格式化上下文)
- CSS之BFC、IFC、GFC和FFC
- 浅谈BFC和IFC
- 浅谈BFC块状格式化上下文环境
- 浅谈CSS BFC及其应用
- 理解CSS中BFC
- (块级格式化范围)[DIV/CSS] BFC
- BFC(块格式化上下文)知识点整理
- BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- BFC(格式化上下文)
- 常用u-boot命令详解(全)
- linux -- Ubuntu修改静态IP地址重启后无法上网的解决
- 用 bat 批处理命令启动 Android Studio 自带模拟器
- [jQuery Validate]前端校验
- ubuntu 16.04 LTS
- 【CSS】浅谈css中格式化上下文BFC、IFC(一)
- 日期问题
- IplImage, CvMat, Mat 的关系
- 计算机分类经典书籍推荐
- jupyter notebook 增加kernel的方法
- Go 生产者消费者模型
- python学习笔记 第二章
- win10用cmd运行java可以,却不能运行javac.
- Android中各种Span的用法