float: right;
右浮动，顾名思义就是将元素向右浮动。具体表现上，元素会脱离文档流，但是仍然会占据原本的位置，然后向右移动，直到碰到父元素或者其他元素，然后就停止移动。右浮动的元素的左边缘和包含它的块框的右边缘相接触。
在下面的例子中，大家将两个div元素都设置了浮动，其中一个右浮动，另一个左浮动。右浮动的元素有一个宽度和高度，而左浮动的元素只有宽度没有高度：
<div></div> <div></div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
另外一个例子，大家在图片上添加了右浮动，让文章文字和图片不再相互覆盖：
float: left;
左浮动与右浮动的表现形式基本相同，但是移动的方向不同。左浮动的元素会脱离文档流，向左边移动，碰到父元素或者其他元素停止。同时，左浮动的元素的右边缘和包含它的块框的左边缘相接触。
下面大家再来看一下左浮动的实际应用。大家有一些段落需要图片配合，但是图片的宽度可能并不是段落正文的整个宽度，因此需要对图片进行左浮动，使得段落内容可以快速地填充整个容器。
<p>这是一段文字，有图片需要配合，而图片大小并不是整个段落的宽度。</p> <img src="https://cdn.pixabay.com/photo/2016/02/19/11/35/butterfly-1219849__480.jpg">
这里大家给图片加上了一些margin值，以配合文字进行左浮动布局。在实际应用中，float属性的设置应该根据具体场景来调整，以达到更好的视觉效果。