在web页面中，元素是按照标准文档流排列，块级元素独占一行，从上而下依次排列，内联元素则是从左至右，从上至下排列，所以为了达到复杂样式的实现，可以使用浮动使元素脱离标准文档流。
一、浮动
浮动：float：；
属性：left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父元素继承float属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
border: 3px solid red;
}
.box1{
width: 200px;
height: 300px;
background: deepskyblue;
}
.box2{
width: 400px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
这是浮动前的效果
当子元素都浮动后
浮动的效果：
1、左浮动向左边，右浮动向右边
2、浮动只影响后面的元素，不影响前面的元素
3、父级元素的宽度小于浮动元素的总宽度时，子元素会被迫换行
4、先写的先浮动，后写的后浮动
5、当父元素宽度/高度小于子元素宽度/高度时（已浮动），子元素会出界
6、图片浮动不会影响文字，文字会环绕图片形成图文混排效果
浮动产生的问题：
如上图所示，当父元素未设置高度时，子元素浮动，会使得父元素高度塌陷。
所以使用了浮动后必须要清除浮动，避免给后续元素带来影响。
二、清除浮动
父元素不设置高度，由子元素高度撑开，一般是为了方便页面添加内容，但是子元素添加浮动后，会使得父元素高度塌陷，那么如何清除浮动所带来的影响呢，有如下四个方法
1、给父元素添加高度
顾名思义，父元素未是指高度子元素浮动会高度塌陷，那我们给父元素添加高度就可以解决，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
border: 3px solid red;
background: orange;
height: 400px;
}
.box1{
width: 200px;
height: 300px;
background: deepskyblue;
float: left;
}
.box2{
width: 400px;
height: 250px;
background: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
缺点：不灵活
2、给浮动元素的父级元素添加overflow：hidden；
这个的本质是添加了overflow:hidden;后触发一个BFC区域，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
border: 3px solid red;
background: orange;
overflow: hidden;
}
.box1{
width: 200px;
height: 300px;
background: deepskyblue;
float: left;
}
.box2{
width: 400px;
height: 250px;
background: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
缺点：如果有定位出去的元素将会被隐藏，因为overflow:hidden;本来就是文本溢出隐藏。
内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
3、在浮动元素后面添加一个空标签（块级元素才可），并给元素添加
.box_clear{
height: 0;
width: 0;
clear: both;
}全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
border: 3px solid red;
background: orange;
}
.box1{
width: 200px;
height: 300px;
background: deepskyblue;
float: left;
}
.box2{
width: 400px;
height: 250px;
background: green;
float: left;
}
.box_clear{
height: 0;
width: 0;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box_clear"></div>
</div>
</body>
</html>
缺点：添加无意义标签，语义化差，且代码冗余。
4、万能清除法
采用after伪元素清除浮动
.clear::after{
content: "";
display: block;
height: 0;
width: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
只需要在父级元素class后面添加clear名称即可。
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
border: 3px solid red;
background: orange;
}
.box1{
width: 200px;
height: 300px;
background: deepskyblue;
float: left;
}
.box2{
width: 400px;
height: 250px;
background: green;
float: left;
}
.clear::after{
content: "";
display: block;
height: 0;
width: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box clear">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
效果如下：
优点：无额外标签，简洁，方便。
综上：清除浮动时，推荐使用此万能清除法
------逆战班
