css 高度塌陷和外边距折叠问题详解,(BFC)
一,高度塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .outer{ border: 10px red solid; /* BFC(Block Formatting Context) 块级格式化环境 - BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 - 元素开启BFC后的特点: 1.开启BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素 - 可以通过一些特殊方式来开启元素的BFC: 1、设置元素的浮动(不推荐) 2、将元素设置为行内块元素(不推荐) 3、将元素的overflow设置为一个非visible的值 - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素 */ /* float: left; */ /* display: inline-block; */ /* overflow: hidden; */ } .inner{ width: 100px; height: 100px; background-color: #bfa; /* 高度塌陷的问题: 在浮动布局中,父元素的高度默认是被子元素撑开的, 当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离 将会无法撑起父元素的高度,导致父元素的高度丢失 父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理! */ float: left; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> <div style="width: 200px;height: 200px;background-color:yellow;"></div> </body> </html>
内容
1.父元素outer没有高度时,子元素inner开启了浮动,脱离了文档流,不能撑开父元素,此时,父元素的高度已塌陷了。那么,兄弟元素div就会往上移动,破坏了页面结构
2.处理塌陷问题,父元素outer设置overflow: hidden;,使其开启BFC,则父元素就可以包含子元素inner了,兄弟元素div也不会上移了。
效果
二,上外边距折叠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; /* float: left; */ /* 开启BFC */ /* overflow: hidden; */ } /* .box2{ width: 200px; height: 200px; background-color: orange; overflow: hidden; } */ .box3{ width: 100px; height: 100px; background-color: yellow; margin-top: 100px; } </style> </head> <body> 34 margin-top: 100px; <div class="box1"> <div class="box3"></div> </div> <!-- <div class="box2"> </div> --> </body> </html>
内容
1.父元素box1,和子元素box3, 当子元素设置了margin-top: 100px; 此时,父元素和子元素外边距重叠了,子元素和父元素都往下移动了100px
2.此时,父元素设置overflow: hidden;使其开启BFC,即可消除外边距重叠问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ font-size: 50px; } .box1{ width: 200px; height: 200px; background-color: #bfa; float: left; } .box2{ width: 400px; height: 250px; background-color: #ff0; /*float: left;*/ /*clear: left;*/ } /*.box3{ width: 200px; height: 200px; background-color: orange;*/ /* 由于box1的浮动,导致box3位置上移 也就是box3收到了box1浮动的影响,位置发生了改变 如果我们不希望某个元素因为其他元素浮动的影响而改变位置, 可以通过clear属性来清除浮动元素对当前元素所产生的影响 clear - 作用:清除浮动元素对当前元素所产生的影响 - 可选值: left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 both 清除两侧中最大影响的那侧 原理: 设置清除浮动以后,浏览器会自动为元素添加一个上外边距, 以使其位置不受其他元素的影响 */ /*clear: both;*/ } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <!-- <div class="box3">3</div>--> <!-- <span style="width:500px; height:400px; background-color: red; display: block"></span>--> </body> </html>
内容;
1. box1元素设置float;left, 此时,兄弟元素box2会往上移动,若不想让box2往上移动,这设置clear;left, 清除浮动对box2的影响,此时box2,不会往上移动了,原理;设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素的影响。
四。高度塌陷最终解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* <!-- clear 只针对浮动--> */ .box1{ border: 10px red solid; /* overflow: hidden; */ } .box2{ width: 100px; height: 100px; background-color: #bfa; float: left; } .box3{ clear: both; } .box1::after{ content: ‘‘; clear: both; display: block; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <!-- <div class="box3"></div> --> </div> </body> </html>
内容;
1.父元素box1,子元素box2,
2.
.box1::after{
content: ‘‘;
clear: both;
display: block;
}
在父元素的末尾添加一个空字符子元素,让他清除box2的浮动,将他转换成块元素,此时父元素会撑开子元素box2。
五,解决高度塌陷和外边距折叠的最终方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; } /* .box1::before{ content: ‘‘; display: table; } */ .box2{ width: 100px; height: 100px; background-color: orange; margin-top: 100px; } /* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题,当你在遇到这些问题时,直接使用clearfix这个类即可 */ .clearfix::before, .clearfix::after{ content: ‘‘; display: table; clear: both; } </style> </head> <body> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html>
内容;
1.解决高度塌陷和外边距折叠的最终方案的经典代码