BFC布局规则

时间：2020-09-29 13:14:19 阅读：33 评论：0 收藏：0 [点我收藏+]

1. BFC （Block formatting contexts）就是块级格式上下文，是页面盒模型（块盒和行盒）布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

html 根元素
float 浮动，即float 除 none 以外的值
绝对定位，position (absolute、fixed)
overflow 不为 visiable，即为（hidden、auto、scroll）
display 为表格布局或者弹性布局，如display 为 inline-block、table-cells、flex

2. BFC 主要的作用是：

清除浮动，比如一个div中包括一个float元素，要把它包含进来，就需要对这个div设置如overflow: hidden的就变成一个BFC。
防止同一 BFC 容器中的相邻元素间的外边距重叠问题，下面的两个div元素的上下间隔最后为100px，so, 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。这里可以对每一个div设置overflow：hidden，然后里面的内容放到一个div或p中。

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

实现左图右文之类的效果，两列布局模式。

<img src=‘image.png‘>
<p>我是超长的文字<p>
img {
    float:left
}
p {
    overflow:hidden
}

解决浮动元素造成的父元素高度塌陷问题：

<div class=‘parent‘>
    <div class=‘float‘>浮动元素</div>
</div>
.parent {
    overflow:hidden;
}
.float {
    float:left;
}

BFC布局规则

原文：https://www.cnblogs.com/roy1/p/13735490.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)