这是我的第一篇博客,不知道从什么开始写起,那就从我现在看的开始写起吧。以前我也不知道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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。