一、浮动float
文档流
1、正常的文档流 元素依次排列的，就是一个简单的队列
2、如果子元素浮动float，子元素会脱离文档流，漂浮到空中
1、父元素与子元素的关系
父元素不需要设置高度，其获取子元素的高度
<style>
.parent{
width: 200px;
background-color: red;
/* 父元素不需要设高度，获取子元素的高度，
子元素会将其撑开 ，父元素就是一个容器（相当于气球）*/
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
2、子元素浮动
子元素浮动float，父元素高度坍塌
原因： 如果子元素浮动float，子元素会脱离文档流，漂浮到空中。由于父元素的高度是通过获取子元素的高度得到，子元素脱离后其就不能获取高度了。
<style>
.parent{
width: 200px;
background-color: red;
/* 父元素不需要设高，获取子元素的高度，
子元素会将其撑开 ，父元素就是一个容器（相当于气球）*/
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
/* 子元素浮动float，父元素高度坍塌 */
float: left;
}
</style>
3、子元素浮动float造成的问题
浮动造成的问题
1、让父元素高度坍塌
2、对后面的元素造成影响
<style>
/* 浮动造成的问题
1、让父元素高度坍塌
2、对后面的元素造成影响 */
.parent{
width: 200px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.test{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
<div class="test"></div>
子元素浮动前：
子元素浮动后：
4、子元素浮动问题解决
解决方案：建立隔离带
在父元素增加overflow: hidden;
<style>
/* 解决方案：建立隔离带
在父元素增加overflow: hidden; */
.parent{
width: 200px;
background-color: red;
overflow: hidden;
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.test{
width: 200px;
height: 200px;
background-color: green;
}
</style>
5、overflow
解决溢出隐藏
问题：
<style>
.parent{
width: 100px;
height: 100px;
background-color: red;
}
.child{
width: 50px;
height: 200px;
background-color: green;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
解决：
<style>
.parent{
width: 100px;
height: 100px;
background-color: red;
/* 解决溢出隐藏 */
overflow: hidden;
}
.child{
width: 50px;
height: 200px;
background-color: green;
}
</style>
