css 浮动 float 03-高度塌陷问题
css 浮动 float 03-高度塌陷问题
1. 高度塌陷问题
我们经常不对父元素的高度进行设置，希望父元素的高度由内容撑开，也就是由它的子元素决其高度，当子元素开启浮动之后，则子元素脱离文档流无法继续撑开父元素，导致父元素的高度塌陷。
代码1：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>floatTesttitle>
<style>
.outter{
width: 400px;
height: auto;
border: solid black 2px;
}
.inner{
width: 300px;
height: 200px;
background-color: blueviolet;
/* float: left; */
}
style>
head>
<body>
<div class="outter">
<div class="inner">
div>
div>
body>
html>
这里我们创建了两个div 进行嵌套，外层 outter 设置了边框和宽度高度设置为auto,，内层设置背景颜色，高度为300px
运行结果：
外层容器outter的高度确实已经被撑开
我们修改代码，开启inner的浮动
运行结果：
父元素的高度塌陷
2 解决方法1
BFC(Block Formatting Context) 块级格式化环境
BFC的特点:
1.开启BFC后的元素不会被浮动元素覆盖
2.开启BFC后的子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
我们通过BGC的第三个特点可以解决高度塌陷问题，我们为父元素开启BFC，使其可以包含浮动的子元素。
开启BFC的方式：
BFC通过其他的属性间接开启
1.设置元素的浮动
2.将元素的display设置为inline-block
3.overflow设置为visiable以外的值（hidden,auto）
3解决方法2
这里我们写一个新的例子
代码2：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>floatTesttitle>
<style>
.box1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blueviolet;
clear: left;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
body>
html>
这里我们为box1开启浮动，在box2中加入了 **clear: left; ** ，clear 会清除浮动元素对该元素的影响，具体是浏览器为其增加了外边距。
运行结果：
我们为box2增加了clear属性成功解决了高度塌陷问题
方法改进：
我们修改一下代码
<head>
<meta charset="UTF-8">
<title>floatTesttitle>
<style>
.outter{
border: 1px black solid;
width: 400px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blueviolet;
clear: both;
}
style>
head>
<body>
<div class="outter">
<div class="box1">div>
<div class="box2">div>
div>
body>
我们为两个盒子外面套一个父元素，然后设置一下父元素的边框
运行结果：
我们再此基础上继续思考，如果这个时候紫色块的高度为0，那就得到了我们一开始想要的结果，那就是父元素高度由子元素高度决定，并且高度不塌陷。
我们将box2的高度改为0px
运行结果：
（这里方块应该为蓝色，截图时不小心将蓝色高度改成了0）
继续改进：
接下来我们将box2去掉，利用外层的伪类after解决
代码：
<head>
<meta charset="UTF-8">
<title>floatTesttitle>
<style>
.outter{
border: 1px black solid;
width: 400px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.outter::after{
content: '';
display: block;
clear: both;
}
style>
head>
<body>
<div class="outter">
<div class="box1">div>
div>
body>