相关文章
BFC攻略
一、什么是BFC
BFC 是 “Block Formatting Context”（块级格式化上下文）的缩写，是 CSS 布局中的一个重要概念。BFC 在 Web 页面中决定了元素如何布局、定位以及与其他元素的交互。理解 BFC 对于解决一些布局问题、处理浮动元素以及避免 margin 重叠等方面非常重要。
二、BFC 的特性
块级化元素：BFC 中的所有元素被渲染成一个独立的块级框，内部元素在垂直方向上一个接一个地排列。
布局规则：BFC 中的元素按照一定的规则进行布局，不会与浮动元素重叠，也不会影响到外部的布局。
边界计算：BFC 内部的边界会根据包含块来计算，并不会与外部元素的边界相混合。
清除浮动：BFC 可以包含浮动的子元素，并且可以自动清除其影响，防止父元素塌陷。
内部元素独立性：BFC 内部的元素对外部的元素不产生影响，反之亦然。这意味着 BFC 可以形成一个独立的环境，内部元素的样式和布局不受外部环境的影响。
三、如何创建 BFC
根元素：根元素（HTML 标签）默认就是一个 BFC。
浮动元素：设置元素的浮动属性（float）为除 “none” 以外的值。
绝对定位：设置元素的定位属性（position）为 “absolute” 或 “fixed”。
内联块级元素：设置元素的 display 属性为 “inline-block”。
overflow 属性：设置元素的 overflow 属性为除 “visible” 以外的值（例如 “auto”、”hidden” 或 “scroll”）。
四、BFC 的应用场景
清除浮动：通过创建 BFC，可以清除浮动元素对布局的影响，避免父元素高度塌陷。
避免 margin 重叠：在两个相邻元素的 margin 之间创建一个 BFC，可以避免 margin 重叠问题。
多栏布局：通过创建多个 BFC，可以实现多栏布局，并保证各栏之间的独立性。
防止元素被浮动元素覆盖：将需要保护的元素包裹在一个 BFC 内部，可以防止其被浮动元素覆盖。
五、创建 OR 清除
创建 BFC：在某些情况下，你可能希望创建一个新的 BFC，以控制元素的布局、边界、浮动等。例如，你可能想要防止外边距重叠，或者想要清除浮动对布局的影响。创建 BFC 的方法包括设置元素的 overflow 属性为除了 visible 以外的值、使用浮动、绝对定位、inline-block 或者设置 display 为 table-cell 等。创建 BFC 可以帮助你更好地控制布局，避免一些布局问题。
清除 BFC 中的浮动：在使用浮动布局时，可能会导致父元素的高度坍塌（height collapse）或者布局错乱的问题。为了解决这些问题，可以通过清除 BFC 中的浮动来修复。清除浮动可以通过多种方式实现，包括使用 clearfix 技巧、使用 overflow 属性、或者触发父元素的 BFC 等。清除浮动可以保证父元素正确地包含浮动元素，使布局更加稳定和可靠。
综上所述，创建 BFC 和清除 BFC 中的浮动是两个不同的操作，你需要根据具体的布局需求来决定应该采取哪种方法。如果你遇到了外边距重叠、浮动导致的布局问题等情况，你可能需要创建 BFC 或清除 BFC 中的浮动来解决问题。
六、如何解决边距重叠问题
解决兄弟元素边距重叠
设置为浮动 float:left;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决外边距重叠问题</title>
<style>
.parent {
border: 1px solid black;
overflow: hidden;
}
.child {
border: 1px solid black;
margin: 20px auto;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素 1</div>
<div class="child">子元素 2</div>
</div>
</body>
</html>
|
*设置margin-top/bottom值时统一设置上或下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决外边距重叠问题</title>
<style>
.parent {
border: 1px solid black;
overflow: hidden;
}
.child {
border: 1px solid black;
width: 100%;
margin-bottom: 20px;
&:nth-child(1) {
margin-top: 20px;
}
&:nth-child(2) {
margin-top: 40px;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素 1</div>
<div class="child">子元素 2</div>
</div>
</body>
</html>
|
解决父子元素边距重叠
外层元素 overflow:hidden;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决外边距重叠问题</title>
<style>
.parent {
margin-top: 20px;
background: red;
overflow: hidden;
}
.child {
width: 100%;
margin-top: 20px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素 1</div>
</div>
</body>
</html>
|
内层元素 display:inline-block;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决外边距重叠问题</title>
<style>
.parent {
margin-top: 20px;
background: red;
}
.child {
width: 100%;
margin-top: 20px;
background: green;
display:inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素 1</div>
</div>
</body>
</html>
|
