CSS - 浮动
float：none | left | right
- 默认值：none
- 适用于：所有元素
- none：设置对象不浮动
- left：设置对象浮在左边
- right：设置对象浮在右边
浮动元素
对于浮动元素，首先，浮动元素会以某种方式将浮动元素从文档的正常流（至于流的问题后面学习布局的时候在深入了解）中删除，但是还是会影响布局。然后看一个例子，还有习大大的图片呢。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img {
width: 400px;
height: 200px;
}
</style>
</head>
<body>
President Xi *, also general secretary of the * Party of China Central Committee and chairman of the Central Military Commission, talks with academician of Chinese Academy of Engineering Guan Huashi at Pilot National Laboratory for Marine Science and Technology during an inspection tour in Qingdao, East China's Shandong province, June 12, 2018. [Photo/Xinhua]
President Xi * conducted an inspection tour in the cities of Qingdao and Weihai of Shandong province on Tuesday morning after attending the 18th SCO Summit in Qingdao.
<img src="./img/1.jpg"/>
Xi first came to the Pilot National Laboratory for Marine Science and Technology (Qingdao), to know more about major frontier sciences, the independent research and development of marine high-end equipment, as well as the promotion of military-civilian integration.
He encouraged the research staff members to contribute more to the country.
At the laboratory, Guan Huashi, an academician from Chinese Academy of Engineering, spoke with Xi about the research and development of marine drug. Guan said his dream is to build China's "blue drugstore".
</body>
</html> 至于图片在文档中的显示方式的原因这里就不说了，之前CSS - 文本属性已经提到了文本相关的知识。
然后我们将图片浮动
img {
width: 400px;
height: 200px;
float: right;
}可以看到图片已经浮动到最右侧，然后之前的文字已经环绕图片，被挤到左侧的部分。至于原因呢，还是先看一张图片
因为float的层叠优先级还是在inline元素的下面，所以这里没有直接覆盖文本内容。
可能会有一个问题？既然inline的层叠优先级高于float，那就应该不影响文字的排版。但是img自身还是一个inline属性，还是和文本出于同一层级，这样自然而然占用了右侧的位置，文本内容只能往下行排列。
第二个问题是为什么现在的图片可以占用多行文本的内容
先说两个概念：
文档流： 相对于盒子模型文本流： 相对于文本
float的对象脱离文档流，但是没有脱离文本流，从上面的层叠优先级的图中也可以看到。既然没有脱离文本刘，那就会占用右侧的文本流位置。
可能想法纠结的同学还是会有一个问题，那么文本内容为什么在块级元素的上面呢？
因为行内元素会自动形成匿名块级元素（我的理解是这样，如果没有产生匿名块盒，那就没法与块级元素一起占用父元素的位置），这也是行内元素会在文档流中占用位置的原因。
当出现浮动元素的时候，是不会占用父元素的宽度的，这在之前的文章介绍BFC的时候已经说过了，将img浮动放在div中，div是没有高度的。
浮动的详细内幕
首先建立概念包含块，浮动元素的包含块是其最近的块级祖先元素。这里的意思是什么呢？（我的理解）浮动元素是不利于页面布局的，所以我们需要建立一个浮动的范围去规范其作用边界。找到块级祖先元素，我们可以利用块级祖先元素进行布局，然后在当前块级元素中在进行浮动的相关操作。
1. 浮动元素的左或者右边界不能超过其包含块的左右内边界。
div {
width: 800px;
height: 300px;
padding: 20px;
border: 5px solid red;
margin: 10px;
background-color: green;
}
img {
width: 400px;
height: 200px;
float: right;
}<div> <img src="./img/1.jpg"/></div>2. 浮动元素的左右外边界必须是原文当中之前出现的左浮动或右浮动元素的外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
.main {
width: 800px;
height: 300px;
padding: 20px;
border: 5px solid red;
margin: 10px;
background-color: green;
}
img {
width: 200px;
height: 100px;
float: right;
}
.bottom-img {
top: 0px;
}
.contain {
height: 200px;
}<div class="main">
<img src="./img/1.jpg"/>
<img src="./img/1.jpg"/>
<div class="contain"></div>
<img class="bottom-img" src="./img/1.jpg"/>
</div>*这个规则的意义在于可以让所有的浮动元素可见，不会存在浮动元素之间的覆盖。
3. 左浮动元素的右外边界不会再其右边右浮动元素的左外边界的右边。右浮动元素的左外边界不会在其左外边界左浮动元素的右外边界的左边。
可能看这句话会有点绕人，这里其实讲的是当父级块级元素的宽度不够当前多个浮动元素的范围的时候的时候，后一个浮动元素会向下浮动。这条规则也是为了不会造成浮动元素的覆盖。
.main {
width: 300px;
height: 300px;
border: 5px solid red;
margin: 10px;
background-color: green;
}
img {
width: 200px;
height: 100px;
}
.left {
float: left;
}
.right {
float: right;
}<div class="main">
<img class="left" src="./img/1.jpg"/>
<img class="right" src="./img/1.jpg"/>
</div>4. 浮动元素的顶端不能比之前的所有浮动元素或者块级元素的顶端更高。
.main {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 20px;
background-color: green;
}
img {
width: 200px;
height: 100px;
}
.left {
float: left;
}
.right {
float: right;
height: 200px;
}<div class="main">
<br/>
<img class="left" src="./img/1.jpg"/>
<img class="right" src="./img/1.jpg"/>
</div>5. 浮动元素必须尽可能高地放置。
基本情况下浮动元素会在当前文本行框的顶端对齐。6. 左浮动元素向左尽可能远，有浮动元素必须向右尽可能远。位置越高，就会向右或者向左浮动的更远。
负外边距
负外边距可能会导致浮动元素移动到其父元素的外面。
.main {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 20px;
background-color: green;
}
img {
width: 200px;
height: 100px;
}
.left {
margin-left: -20px;
float: left;
}<div class="main">
<img class="left" src="./img/1.jpg"/>
</div>浮动元素、内容和重叠
如果一个浮动元素和正常留中的内容发生重叠会发生什么呢？规则如下- 行内框与一个浮动元素重叠时，其边框背景和内容都在浮动元素之上显示。
- 块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。
对于第一个规则，可能这个不太好测试，但是借助负外边距还是可以测试出来的。
.main {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 20px;
background-color: green;
}
img {
width: 200px;
height: 100px;
}
.left {
margin: 10px -15px 10px 10px;
float: left;
}
strong {
background-color: yellow;
border: 1px gray solid;
padding: 5px;
}
.footer {
width: 300px;
height: 200px;
background: gray;
}<div class="main">
<img class="left" src="./img/1.jpg"/>
<div class="footer">
<strong>向内元素</strong>
</div>
</div>我们可以看到文本内容相关的内容，边框和内边距都已经是在浮动元素的上面。这也论证了之前提到的层叠样式的7层顺序。第二个规则图中可以看到背景灰色的div是图片的下面。
清除
前面谈到了浮动的相关的内容，浮动内容会打乱当前页面的展示（说法牵强了点），假如我们存在元素不想被浮动元素影响，那怎么办呢，那就可以使用清除浮动的内容。
.main {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 20px;
background-color: green;
}
img {
width: 200px;
height: 100px;
}
.left {
float: left;
}
strong {
background-color: yellow;
border: 1px gray solid;
padding: 5px;
}
.footer {
width: 300px;
height: 200px;
background: gray;
}<div class="main">
<img class="left" src="./img/1.jpg"/>
<div class="footer">
</div>
</div>如图，现在图片的浮动到了div元素上，但是现在我们不想图片浮动覆盖到div上，那我们需要借用clear来实现了，将.footer的css属性添加clear如下：
.footer {
width: 300px;
height: 200px;
background: gray;
clear: left;
}clear：none | left | right | both
- 适用于：块级元素
- 继承性：无
- none：允许两边都可以有浮动对象
- both：不允许有浮动对象
- left：不允许左边有浮动对象
- right：不允许右边有浮动对象
清除元素的理解
上面的内容可以看到div元素向下移动了，那还因为clear给div元素引入了清除区域，在div的上外边距之上增加了额外间隔，这个时候我们设置div的margin-top可能会没有效果，除非这个值达到了一定程度（大于浮动元素的高度）。还有一些其他相关内容访问文章w3c标准 - Css - （4）CSS定位方案。