CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。也可以理解成定义网页中各个元素的排列方式，把元素按照正确的大小放在合适的位置。传统PC端有三种布局方式，常规流、浮动、定位。而常规流又被称作标准流也就是我们所熟知的盒子模型。本次分享CSS布局中的浮动的基本知识点。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。浮动float，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。早期浮动用于实现图文环绕，现在大多数用于网页布局当中。
浮动语法：选择器 { float: 属性值; } 浮动属性值：left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。
浮动的特点：
1、浮动元素会脱离标准流（简称“脱标”），在标准流中不占位置。浮动元素不受text-align:center;或margin:0 auto;控制
2、浮动比标准流高半个级别，因此可以覆盖标准流中的元素。
3、浮动找浮动，下一个浮动元素会出现在上一个浮动元素后面左右移动。浮动标签顶对齐可以用margin调整实现。
4、*浮动元素有特殊的显示效果，一行显示多个，可以设置宽高。
为什么要清除浮动： 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占位置，最后父级盒子高度为0，就影响了下面的标准流盒子。清除浮动主要为了解决父级元素，因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
清除浮动影响的方法：
1、直接给父元素设置高度。
2、额外标签法：在父元素内容的最后加上一个块级元素 设置clear:both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
margin: 0 auto;
width: 1000px;
/* hheight: 300px; */
background-color: #389232;
}
.botton{
height: 100px;
background-color: #eedacb;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right{
float: right;
width: 790px;
height: 300px;
background-color: #eba235;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="botton"></div>
</body>
</html>
上图，肤色区域本应该在最下面，受浮动影响在最上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
margin: 0 auto;
width: 1000px;
/* hheight: 300px; */
background-color: #389232;
}
.botton{
height: 100px;
background-color: #eedacb;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right{
float: right;
width: 790px;
height: 300px;
background-color: #eba235;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="botton"></div>
</body>
</html>
通过方法二，使元素不再受浮动影响。
3、单伪元素清除法：用伪元素代替额外标签
.clearfix::after{
content: '';
/* 伪元素默认标签是行内 */
display: block;
clear: both;
}
或者
.clearfix::after{
content: '';
/* 伪元素默认标签是行内 */
display: block;
clear: both;
height:0;
visibility:hidden;
}
4、双伪元素清除法
.clearfix::after,
.clear::before{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
5、给父元素设置overflow:hidden;。（最简洁）
