CSS代码：.div1{width:150px;height:100px;background:pink;}.div2{width:100px;height:150px;background:lavender;}。div3{width:300px;height:200px;background:skyblue;}效果如下图：（一看这个颜色就知道楼主是妹纸，😋）结果上图分析：在标准流程理论中，div作为Block级元素会占据单行，但是布局中最常见的问题之一就是如何在同一行显示多个div元素。这时候标准的流程已经不能满足我们的需求了。这时候我们就需要让元素浮动。如果我想让div1和div2显示在同一行，我需要给这两个元素添加浮动属性float:left。我们来看看此时的结果：上图结果分析：如上图，可以看到蓝色div上面覆盖了粉色div和紫色div。这是因为浮动元素脱离了标准流向浮动层。浮动层高于标准层，不占用页面空间，所以我们看到div1和div2被覆盖在div3之上。虽然都被覆盖了，但是div3里面的文字会被挤走，此时div3还在standard层所以还是占据了页面空间。2、floating会将内联元素和内联块元素转化为块元素。上面提到的块元素是可以浮动的。其实行元素和行内块元素也是可以浮动的，一旦浮动就会转化为块元素。这里我们以span标签为例。HTML代码：span1span2span3css代码：.span1{width:200px;height:200px;background:red;}.span2{width:200px;height:200px;background:green;}.span3{width:200px;height:200px;background:blue;}结果如下：众所周知，span是最常见的内联元素之一，内联元素共用同一行，中间有空隙，width和height属性不起作用。这时候我们给每个span1加上浮动属性float:left。让我们看看结果会怎样？结果如下图所示：很明显，浮动后的元素宽高属性开始起作用了，说明span元素从行标签变成了块标签。3、清浮与其说是清浮，不如说是清浮的影响。下面我们一一了解四种常见的清除浮动的方法：假设我们要实现如下布局，上半部分是导航部分，下半部分是内容部分，导航部分中的两个块向左浮动，正确的。接下来我们看原代码，即不清除浮动时的代码：html代码：logo