本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、CSS浮动
1.基本概念
浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。
浮动关键字：float
2.浮动特点
1）脱离文档流。
2）向左/向右浮动直到遇到父元素或者别的浮动元素
3）浮动会导致父元素高度坍塌。
4）浮动元素不占空间
3.浮动带来的问题：高度坍塌
高度坍塌：在父级不设置高度的时候，靠子元素撑起高度，当所有子元素都浮动起来的时候，此时所有子元素脱离文档流，父元素内部就认为没有元素，父级高度为0
浮动会使父级坍塌：没有给父级设置高度的情况下，使用浮动，父级的高度是0,元素会被其他元素盖住
4.解决高度坍塌
1）给父级加高度:一般不常用，因为你在设计页面时不能把页面写死成固定高度
2）设置超出部分隐藏:超出父级所设置的高度时，就给隐藏起来 overflow:hidden
3）添加一个空的div
4）给父级加伪元素：最常用的方法
具体使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
/*1.左浮动:左边没有空间了，红色盒子会飘起来，这时候下面绿色的盒子上移，就会被红色盒子覆盖*/
float: left;
/*2.右浮动:红色盒子到最右边*/
/*float: right;*/
/*3.盒子移到中间*/
/*margin: 0 auto;*/
}
.div2{
width: 100px;
height: 100px;
background-color: greenyellow;
/*margin: 0 auto;*/
float:left;
}
.div3{
width: 100px;
height: 100px;
background-color: skyblue;
/*margin: 0 auto;*/
float: left;
}
.box{
/*border: 3px solid black;*/
/*4.高度坍塌问题解决*/
/*1）给父级加高度*/
width: 300px;
height: 100px;
/*2）设置超出部分隐藏:超出父级所设置的高度时，就给隐藏起来*/
/*overflow:hidden;*/
}
/*3)给父级加伪元素：最常用的解决父级高度坍塌的问题*/
.box:after{
/*要先转换成块级元素*/
display: block;
/*清除浮动*/
clear: both;
/*加上内容:为空*/
content: "";
}
.div4{
width: 100px;
height: 100px;
background-color: pink;
float:left;
}
/*.div5{*/
/* width: 100px;*/
/* height: 100px;*/
/* background-color: black;*/
/* float:left;*/
/*}*/
</style>
</head>
<body>
<!--1.div#box>div*3（按Tab键自动补全）：创建一个div,里面id属性是box，然后里面包含三个小div-->
<!--2.div.box>div*3：创建一个div，里面的class属性是box，然后里面包含三个小div-->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<!-- <div class="div5"></div>-->
</div>
<div class="div4"></div>
</body>
</html>
