HTML5和CSS的浮动是现代网页设计中非常重要的一部分，它可以让网页看起来更加美观和有条理。浮动的概念是元素向左或向右移动，直到它们的周围环境中没有空间为止。

浮动通常被用来放置图片或文本，可以让它们排列在一行或多行。浮动还可以用来制作列布局，创建响应式网站以及实现各种视觉效果。

.float-right {
float: right;
margin-left: 20px;
}
.float-left {
float: left;
margin-right: 20px;
}

浮动有两个常用的值：左（left）和右（right）。左浮动元素将紧贴其上一个兄弟元素的右侧，右浮动元素则相反。同时，还要注意浮动元素需要设置一个合适的宽度，确保它不会超出其容器。

浮动元素会将其子元素也一同浮动，但是不要忘记清除浮动（clearfix)。清除浮动在现代网页设计中非常重要，可以避免出现兼容性问题。

.clearfix:after {
content: "";
display: table;
clear: both;
}

总的来说，HTML5和CSS的浮动是现代网页设计中非常重要的一部分，它允许我们创造出更加优雅和简洁的网页布局，同时还可以实现各种视觉效果。