介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
高度塌陷和BFC
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.outer{
boder:10px red solid;
2、BFC(Block Formatting Context) 块级格式化环境
- BFC 是css中的一个隐含属性,可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域,和其它块不同
- 元素开启BFC的特点
1、开启BFC的元素,不会被浮动元素覆盖
2、开启BFC的元素,子元素和父元素的外边距不会重叠
3、开启BFC的元素,可以包含浮动的子元素,不会高度塌陷
可以通过特殊方式,开启元素BFC
1、设置元素浮动 (不推荐,会从文档流脱离)
float:left;
2、将元素设置为行内块元素(不推荐)
display:inline-block
3、将元素的overflow设置为非visible的值
常用方式:
overflow:hidden 开启BFC
float:left;
}
.inner{
width:100px;
height:400px;
background-color:#bfs;
1、高度塌陷问题
在浮动布局中,父元素的高度默认是被子元素撑开的(如果不写死父元素高度)
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离
将会无法称其父元素的高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面布局混乱
所以高度塌陷是浮动布局中比较常见的问题,这个问题必须处理
float:left;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div style="width:100px;height:100px;background-color:yellow"></div>
</body>
</html>
开启BFC示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.box1{
width:200px;
height:200px;
background-color:#bfa;
// box1浮动时,对box2开启BFC,box2不会被盖住
float:Left;
// box1开启BFC,box3的外边距不会和box1的重叠
overflow:hidden
}
<--
设置overflow:hidden 属性后开启BFC
box2不会被box1盖住
-->
.box2{
width:200px;
height:200px;
background-color:orange;
overflow:hiddden
}
.box3{
width:100px;
height:100px;
background-color:yellow;
margin-toop:100px;
}
</style>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
</body>
</html>