浮动
浮动在传统意义上指的是文本和里面内容的排列，比如指定图片内容在文字中不同的排版方式（图片与文字内容之间的环绕方式）
浮动也可以用在网页的布局中：div标签是块级元素，默认情况下是独占一行的，我们可以使用浮动来进行定位，使div标签可以进行水平布局
html
<body>
<div></div>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
border: solid 1px red;
float: left;
}
</style>这样设置浮动布局，两个
div元素就可以实现水平排列
文档流
在页面中，文档流动的形式是从上到下的（块元素是从上到下进行排列的，行元素是从左到右进行排列的）这个是正常的情况，但是也有一些是脱离了正常的情况的
html
<body>
<div></div>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
}
div:nth-of-type(1){
border: solid 3px red;
float: left;
}
div:nth-of-type(2) {
background: blue;
}
</style>这样的情况会导致，第一个元素脱离了文档流，后面的元素就感知不到第一个元素了，就上去代替了第一个元素的位置，因此，浮动之后是对后面的元素有影响的（普通的元素占用空间位，如果浮动之后，空间位就会消失了，后面元素会补充到这个空间位）
如果后面的元素也跟着浮动，那么这个两个
div元素就会进行水平布局（是一个战队的内容，会挨在一起了）cssdiv { width: 200px; height: 200px; } div:nth-of-type(1){ border: solid 3px red; float: left; } div:nth-of-type(2) { background: blue; float: left; }如果我们只对第二个元素进行浮动，那么浮动对第一个元素是不会有影响的
浮动属性
float 属性规定元素如何浮动，需要在同一个<p></p>中设置文本和相关的浮动元素
float 属性可以设置以下值：
left- 元素浮动到其容器的左侧right- 元素浮动在其容器的右侧none- 元素不会浮动（将显示在文本中刚出现的位置），默认值。inherit- 元素继承其父级的float值
设置左右布局的浮动：在做左右浮动的时候，我们一般将一类的元素放到一个父盒子里面
html
<body>
<main>
<div></div>
<div></div>
</main>
</body>
<style>
main {
border: solid 3px black;
width: 620px;
height: 220px;
margin: 0 auto; // 设置父盒子进行居中
padding: 20px;
}
div {
width: 300px;
height: 200px;
box-sizing: box-border;
}
div:nth-of-type(1) {
border: solid 3px red;
float: left;
}
div:nth-of-type(2) {
background: blue;
float: right;
/* 如果第二个元素也使用左浮动，那我们还需要设置外边距给它顶开
float: left;
margin-left: 20px;
*/
}
</style>浮动的元素是在父盒子的边框和内边距里面的（浮动的元素是无法逾越内边框的）
行级元素浮动后转化为块级元素：
html
<body>
<main>
<span>111</span>
<span>222</span>
</main>
</body>
<style>
span {
border: solid 2px blue;
float: left; // 行级元素转换后会自动变成了块级元素
width: 300px;
height: 50px;
}
span:nth-of-type(2) {
float: right;
}
</style>行级元素设置宽度是没有效果的，当我们设置浮动后变成了块级元素后，设置宽度就有效果了
清除属性
clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动
clear 属性可设置以下值之一：
none- 允许两侧都有浮动元素，默认值left- 左侧不允许浮动元素right- 右侧不允许浮动元素both- 左侧或右侧均不允许浮动元素inherit- 元素继承其父级的clear值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后