“这是我参与8月更文挑战的第14天，活动详情查看： 8月更文挑战”
今天我们主要学习CSS样式的浮动布局。通常默认的排版方式，是将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，这时就需要使用浮动属性。
Float
CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
什么是Float浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。
Float浮动的格式
选择器
{
float:属性值;
}
常用属性值：
- none：元素不浮动（默认值）
- left：元素向左浮动
- right：元素向右浮动
元素浮动方式
如果元素是水平方向浮动，那意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，那么文本流将环绕在它左边。
相邻元素浮动
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
<style>
#id1{
width:7.5rem;
height: auto;
background-color: #7FFF00;
float: left;
}
#id2{
width:7.5rem;
height: auto;
background-color: aqua;
float: left;
}
#id3{
width:7.5rem;
height: auto;
background-color: blue;
float: left;
}
</style>
<body>
<div id="id1">这是第一个浮动块</div>
<div id="id2" >这是第二个浮动块</div>
<div id="id3">这是第三个浮动块</div>
</body>
可以看到，三个div是相邻排列的，大家也可以动手试试，如果只有一个或者只有两个div使用了float是什么效果。
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
属性 描述 值
clear 指定不允许元素周围有浮动元素。 left right both none inherit
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
写在最后
好了，以上就是CSS样式的浮动属性，动手练起来吧！
以上内容如有不正之处，欢迎掘友们批评指正。
