26、关于父元素高度塌陷和块级格式化环境BFC
2022-06-14 本文已影响0人
小黄不头秃
BFC块级格式化环境
- bfc是css中的一个隐含的属性，可以为该元素开启一个独立的布局区域 ，它包含着一定的规则
- 元素开启bfc的特点：
（1）不会被浮动元素覆盖
（2）子元素和父元素的margin不会重叠
（3）可以包含浮动的子元素
一些特殊方式：
- 设置元素浮动；float：left；（不推荐）
- 设置行内块元素（不推荐）
- overflow设置为非visible
这里有详细的介绍：
(1) http://t.zoukankan.com/todayhappy-p-4608476.html
(2) https://swordair.com/css-positioning-schemes-normal-flow/
(3) https://www.w3.org/TR/CSS21/visuren.html#normal-flow
(4) https://blog.csdn.net/ZHANGYANG_1109/article/details/123488265
高度塌陷
在浮动的布局中，父元素会被子元素撑开
但是子元素脱离文档流之后，将会高度塌陷，父元素的高度丢失，会导致布局混乱；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷和bfc</title>
<style>
/*
BFC块级格式化环境
- bfc是css中的一个隐含的属性，可以为该元素开启一个独立的布局区域
- 元素开启bfc的特点：
（1）不会被浮动元素覆盖
（2）子元素和父元素的margin不会重叠
（3）可以包含浮动的子元素
一些特殊方式：
1、设置元素浮动；float：left；（不推荐）
2、设置行内块元素（不推荐）
3、overflow设置为非visible
*/
.outer{
border: 10px red solid;
overflow: hidden;
}
.inner{
float: left;
width: 100px;
height: 100px;
background-color: #bbffaa;
/* 高度塌陷
在浮动的布局中，父元素会被子元素撑开
但是子元素脱离文档流之后，将会高度塌陷，父元素的高度丢失
会导致布局混乱；
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div style="width: 100px;height:100px;background-color:yellow;"></div>
</body>
</html>
