原因:垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发 生重叠
解决办法(特性6): BFC就是一个独立的容器,容器内部的元素不会影响到容器外面 反之亦然
触发bfc只有overflow属性能用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1, .box2 { width: 200px; height: 200px; } .box1 { background-color: tomato; margin-bottom: 100px; } .box2 { background-color: green; margin-top: 100px; margin-top: 200px; } /* 解决方法,给盒子套一个父盒子,加 overflow: hidden;*/ .father { /* 触发bfc */ overflow: hidden; overflow: scroll; overflow: auto; } /* 解决办法(特性6): BFC就是一个独立的容器,容器内部的元素不会影响到容器外面 反之亦然 */ </style> </head> <body> <div class="father"> <div class="box1">box1</div> </div> <div class="father"> <div class="box2">box1</div> </div> <!-- 兄弟关系外间距塌陷问题 现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象; 两个值一样大,取当前值 两个值不同,取较大值 原因:并列关系的两个元素共用了一个外间距区域 解决办法: 分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden' --> </body> </html>
3.防止字体环绕
原因:浮动 脱离标准流不脱离文本流 浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字 反而还会环绕浮动的盒子。
解决办法(特性6,4):bfc就是页面上的一个独立容器,容器里面的子标签不会影响外面标签
BFC 的区域不会与 float 的标签区域重叠
触发bfc除了(绝对,固定定位)属性其余都能用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap { width: 700px; height: 500px; border: 2px solid red; } .wrap .box1 { width: 200px; height: 200px; background: pink; float: left; } .wrap .box2 { width: 300px; height: 200px; background: yellowgreen; /* 触发bfc */ /* float: left; float: right; */ /* overflow: hidden; overflow: scroll; overflow: auto; */ display: inline-block; /* 不能用 */ /* position: absolute; position: fixed; */ } </style> </head> <body> <div class="wrap"> <div class="box1">box1</div> <div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div> <!-- 原因:浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字 反而还会环绕浮动的盒子。 • 解决办法(特性6,4):bfc就是页面上的一个独立容器,容器里面的子标签不会影响外面标签 • BFC 的区域不会与 float 的标签区域重叠 --> </div> </body> </html>