BFC(块级格式化上下文)布局特性

最新推荐文章于 2023-07-02 16:52:43 发布

王小二旺旺旺

最新推荐文章于 2023-07-02 16:52:43 发布

阅读量258

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/star66666651/article/details/107170318

版权

BFC(块级格式化上下文)？

块级格式化上下文就相当于页面上一个独立的容器，容器里面子元素的变化不会影响到外面元素的排列。包括浮动外边距合并等等。这个特性的出现使我们的页面布局不会出现意外情况了。

如何创建BFC?

1 根元素(<html>)

2 元素的display属性设置为 block table list-item inline-block inline-flex table-cell table-caption flex。

3 float不为none。

4 postion为absolute或者fixed。

5 overflow不为visible。

BFC布局特性：

1 在BFC中，盒子兄顶端开始垂直一个接一个地排列

2 盒子垂直方向的距离由margin决定，同一个BFC中两个相邻盒子垂直方向的margin会发生重叠。

3 在BFC中，每个格子左外边距(margin-left)会碰触到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）。

4 BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

5 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

BFC用途：

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

(2) 解决外边距合并问题

主要用到盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

.blue, .red-inner {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red-outer {
  overflow: hidden;//创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
  //或者换为display:flow-root;<div> 中的所有内容都会参与BFC，浮动的内容不会从底部溢出。
}
.red-inner{
	 background: red;
}

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。

BFC总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

王小二旺旺旺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC(块级格式化上下文)布局特性

BFC(块级格式化上下文)？块级格式化上下文就相当于页面上一个独立的容器，容器里面子元素的变化不会影响到外面元素的排列。包括浮动外边距合并等等。这个特性的出现使我们的页面布局不会出现意外情况了。如何创建BFC?1 根元素(<html>)2 元素的display属性设置为 block table list-item inline-block inline-flex table-cell table-caption flex。3 float不为none。4 postion为abso
复制链接

扫一扫