其他分享
首页 > 其他分享> > 文档流 脱离文档流 BFC

文档流 脱离文档流 BFC

作者:互联网

标准文档流:

标准文档流指元素排版布局过程中,元素默认从左到右,从上到下的布局方式,自动换行。

块级元素 和 行内元素 在标准文档流中的表现:

块级元素:

1.块级元素是独占一行的,不与其他元素并列

2.可设置宽高,若不设置宽高则宽度与父元素相同

行内元素:

1.与其他元素并排

2.设置宽高无效,宽高是由内容撑开的

脱离标准文档流:

标准文档流限制很多,比如要实现既要并排又要设置宽高,此时就要脱离标准文档流。css一共有三种手段,使一个元素脱离标准文档流:

1.浮动 float

2.绝对定位 position: absolute

3.固定定位 position: fixed

BFC

BFC(Block formatting context) 直译为“块格式化上下文”,它是一个独立的渲染区域,在该容器中按照一定规则进行布局排列,容器内元素不会影响外部元素,外部元素不会影响内部元素。

BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

普通文档流的布局规则:

1.浮动的元素不会被父级元素计算高度(父级高度塌陷)

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.2个相邻元素的上下margin会重叠

BFC的布局规则:

1.内部的box会在垂直方向,一个接一个的放置

2.Box垂直方向的距离由margin决定,属于同一个的BFC的两个相邻Box的margin会发生重叠

3.每个盒子(块盒和行盒)的margin box的左边,与包含它的父级元素块的左边相连,如果子元素浮动也是如此

4.BFC的区域不会与float box (浮动元素)重叠

5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此

6.计算BFC的高度时,浮动元素也参与计算

 产生BFC的元素:display为bolck, list-item,  table的元素

触发BFC的条件:

1.body根元素,(或者其他包含它的元素,例如两个<P></P> 放在一起,其中一个p外面包裹一层容器,并触发该容器生成一个BFC

2.浮动元素(元素的float是除none以外的值)

3.定位元素 (元素的position为absolute或者fixed)

4.display为一下其中之一:inline-block,  table-cell,  table-caption,  flow-root, 

5.overflow除了visible以外的值(hidden, auto, scroll)

BFC的应用:

1.使用BFC避免margin重叠

 

 

解决方法:我们可以让把第二个p用div包起来,然后激活它使其成为一个BFC,就可以让margin不发生重叠

 

2.自适应两栏布局

 

 页面展示:

 解决方法:这是因为BFC的区域不会与float box重叠。所以我们让right单独成为一个BFC,right会自动的适应宽度,这时候就形成了一个两栏自适应的布局。

 

自适应布局–文字绕图

css最初设计浮动样式就是为了实现文字环绕的效果      这时解决方法就是给文字div添加overflow:hidden

 3.清除浮动。

当我们不给父节点设置高度,子节点设置浮动的时候,父元素会发生高度塌陷,这个时候我们就要清除浮动

解决方法:计算BFC的高度时,浮动元素也参与计算。所以我们可以给父节点激活BFC

 

 

本文参考链接: 

https://blog.csdn.net/sinat_36422236/article/details/88763187

https://blog.csdn.net/qq_44681872/article/details/113630952

 

标签:BFC,浮动,布局,脱离,元素,文档,margin
来源: https://www.cnblogs.com/moringyaozheng/p/14744415.html