hello大家晚上好，最近在忙着第二个项目的事情，博客这边已经鸽了几天了，但是我还是会不停更新下去的，我第二个项目做的是小米商城，，后面会给大家详细介绍一下编写过程中的思想和具体步骤，今天先来和大家说一下在我项目设计过程中用到的最多的一个知识，浮动。
浮动会大量应用在项目设计中，对于模块位置的设计非常好用，那么接下来就让我来给大家详细介绍一下关于浮动的相关知识点。
1.浮动是什么：
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流，
可选值：
none 默认值，元素默认在文档流中排列
left 向页面的左侧浮动
right 向页面的右侧浮动
浮动的特点：
1.浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动；
2.元素浮动以后，元素会尽量向页面的左上或页面右上漂浮；
3.浮动元素默认不会从父元素中移出；
4.浮动的元素不会超过他上边的兄弟元素，最多最多一边齐；
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列,通过浮动可以制作一些水平方向的布局。
2.浮动的特点：
浮动一共有两个特点，在这里我们简单介绍一下：
1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。
举个例子，我们做一个盒子，然后写一段文字，让文字环绕在盒子的周围：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 50px;
height: 50px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
我人作得张够皇够，我司乌，谭下见下救出到没可融到，自召到使死逃，郭老评临喜不他永别谓生历，一艳说尽韩人学一养禀的事骂那马正才作，赠水秦恩只目锐，而韩不赐妙挟恩处作怎，程二场仓，未那人恶土爱感春孔竟是欲航在如以同，令了孔反着次以报于兄然，由光落求善妙丑但小。
爻井当不杨，略之望因救三活谭九就份受秦是皇，薪畴极，家灰化来孔貂才主起前尚登，人他月非永才的在了的才人婵说，他在的恼惜其韩云百则负同动我，变作耐使徒之欲自生后开衣快为书俭，便历是太亓知郭快同，望嗣才一穿三答和沾护同即了兼下负，对君而章选，俭君中便不，友畴。
斯恼先商，快老畴清分拾，放心在不洋终人承这回落故李办第，是呼张二者罪秦帮县徒使，后争作韩书人并人馆向作不，他自化由丈答觉姑胜极韩君见能来皇间，慧竟非永得接嗣况或国乐到化毒司有即心兮，力的非特褒诗匹着用临，说大之你王者快论里鼓，为反朋商一召何召是洪则被后切。
</p>
</body>
</html>效果：
然后我们给上面那个盒子一个浮动，让它脱离文档流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
float: left;
width: 50px;
height: 50px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
我人作得张够皇够，我司乌，谭下见下救出到没可融到，自召到使死逃，郭老评临喜不他永别谓生历，一艳说尽韩人学一养禀的事骂那马正才作，赠水秦恩只目锐，而韩不赐妙挟恩处作怎，程二场仓，未那人恶土爱感春孔竟是欲航在如以同，令了孔反着次以报于兄然，由光落求善妙丑但小。
爻井当不杨，略之望因救三活谭九就份受秦是皇，薪畴极，家灰化来孔貂才主起前尚登，人他月非永才的在了的才人婵说，他在的恼惜其韩云百则负同动我，变作耐使徒之欲自生后开衣快为书俭，便历是太亓知郭快同，望嗣才一穿三答和沾护同即了兼下负，对君而章选，俭君中便不，友畴。
斯恼先商，快老畴清分拾，放心在不洋终人承这回落故李办第，是呼张二者罪秦帮县徒使，后争作韩书人并人馆向作不，他自化由丈答觉姑胜极韩君见能来皇间，慧竟非永得接嗣况或国乐到化毒司有即心兮，力的非特褒诗匹着用临，说大之你王者快论里鼓，为反朋商一召何召是洪则被后切。
</p>
</body>
</html>效果：
可以看到最终文字环绕盒子展示，这是第一个特点.
2. 当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变.
脱离文档流的特点:
块元素：
1:块元素不再独占页面的一行
2:块元素的宽高被内容撑开
浮动过后的行内元素更像行内块元素，一行可以显示多个，并且默认宽度为内容的宽度，特别的方便，可以自由的设置外边距和内边距。
注意：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块元素。
3.清除浮动：
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。
clear可以用来清除其他浮动元素对当前元素的影响：
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除浮动的原理是设置了 clear 的元素，通过调整自身来使自己不要和浮动元素排列在一起。
类似于给自己加个margin-top。
好了，浮动的相关知识点今天就说这么多，这个非常好用，在很多项目里我们都可以用的到，所以希望大家可以记牢浮动部分的知识，感谢大家的观看和支持，再见！