你的位置:首页 > 软件开发 > 网页设计 > CSS之BFC(Block Formatting Context)

CSS之BFC(Block Formatting Context)

发布时间:2017-02-17 00:00:12
这是我的第一篇博客,不知道从什么开始写起,那就从我现在看的开始写起吧。以前我也不知道BFC是什么,今天看了才知道原来以前经常接触,只是不知道专业名称罢了。就像闭包、继承一样,以前经常用到,只是不知道而已,今天我就来说一下,css定位之BFC。BFC与清除浮动是有关系的,那我们就来 ...

这是我的第一篇博客,不知道从什么开始写起,那就从我现在看的开始写起吧。

以前我也不知道BFC是什么,今天看了才知道原来以前经常接触,只是不知道专业名称罢了。就像闭包、继承一样,以前经常用到,只是不知道而已,今天我就来说一下,css定位之BFC。

BFC与清除浮动是有关系的,那我们就来说说,如何清除浮动,清除浮动主要有两种方法

利用 clear属性,清除浮动

使父容器形成BFC

在讲BCF之前,我要先说一下,我们通常控制元素布局的定位方案主要有3种:普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) 

***普通流(Normal Flow)

在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。

***浮动 (Floats)

在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移。

***绝对定位 (Absolute Positioning)

在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响(而浮动素会影响兄弟元素),而元素具体的位置由绝对定位的坐标决定。

BFC 正是属于普通流的,因此它对兄弟元素也不会造成什么影响。

&&--BFC的定义--&&

原标题:CSS之BFC(Block Formatting Context)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。