详细分析了css浮动属性与位置之间的区别：绝对值
1.float属性定义的方向元件是浮动的。在过去，这个属性应该用在图像，文本在图像，但在CSS，任何元素都可以浮动。浮动元素会生成一个块级盒子，不管它自己的元素。Div是一个典型的块，会占据一行级元素。首先看看最基本的块级元素arranged.html代码，下面的风格是基于这。
复制代码代码如下所示：
1帧
2帧
3帧
CSS代码：
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC
}
1 {。
宽度：100px；
身高：50px；
背景颜色：红色
}
box2 {。
宽度：100px；
身高：50px；
背景颜色：蓝色
}
盒{。
宽度：100px；
身高：50px；
背景颜色：绿色
}
实施结果：
由于div是块级元素，框架设置在一个垂直的形式，在实际操作中，往往需要安排框架水平。有两种方法来实现它。第一种是将显示：内联块；
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC
}
1 {。
宽度：100px；
身高：50px；
背景颜色：红色；
显示：内联块
}
box2 {。
宽度：100px；
身高：50px；
背景颜色：蓝色；
显示：内联块
}
盒{。
宽度：100px；
身高：50px；
背景颜色：绿色；
显示：内联块
}
实施结果：
至于中间的差距，究其根源是由于元素之间的空白造成的。因此，设置在父元素字型大小可调节间隙的大小。
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC；
字体大小：34px；
}
在字体大小：34px，贫富差距将扩大。
实施结果：
同样，要去掉间隙，则需要字体大小：0；
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC；
字体大小：0
}
实施结果：
实现所需的布局，并在框的文本已经消失，这也证明了文本的大小影响的差距。你只需要重新设置它的子元素。当然，这不是重点的一天。同样的效果：左浮动；也可以很容易实现。
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC；
}
1 {。
宽度：100px；
身高：50px；
背景颜色：红色；
浮：左
}
box2 {。
宽度：100px；
身高：50px；
背景颜色：蓝色；
浮：左
}
盒{。
宽度：100px；
身高：50px；
背景颜色：绿色；
浮：左
}
实施结果：
将元素添加到浮点数中后，浮动元素将越过父元素的边界或相邻的浮动元素边界，例如，在下面的示例中，当浮动元素的总宽度大于父元素时，它将更改行，并与先前的浮动相匹配，并在稍后显示它。
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC；
}
1 {。
宽度：100px；
身高：100px；
背景颜色：红色；
浮：左
}
box2 {。
宽度：100px；
身高：50px；
背景颜色：蓝色；
浮：左
}
盒{。
宽度：400px；
身高：50px；
背景颜色：绿色；
浮：左
}
实施结果：
如果使用内联块，结果会是什么
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
宽度：500px；
身高：200px；
边境：2px固体# CCC；
}
1 {。
宽度：100px；
身高：100px；
背景颜色：红色；
显示：内联块
}
box2 {。
宽度：100px；
身高：50px；
背景颜色：蓝色；
显示：内联块
}
盒{。
宽度：400px；
身高：50px；
背景颜色：绿色；
显示：内联块
}
实施结果：
这是一盒3而不是1盒，（差距1，这里就不多说了）这是一个使用内联块和判断浮动，如果不使用浮点软件模块相同的宽度可能会导致不同的结果与预期的，所以这是伟大的使用浮动的宽度和高度不变的情况下，如果你不需要看具体的布局，使用适当的属性。
以下代码，只修改部分，其余部分相同，结构相同。
什么是拆盒的浮动的结果：左根据理解，浮动元素不占用空间，也就是说，帧3将忽略帧1，帧2直接与父元素的边界相邻，即框1将覆盖框3。结果如何
复制代码代码如下所示：
盒{。
宽度：100px；
身高：50px；
背景颜色：绿色；
}
实施结果：
为什么框3出现在文本的底部而不是被框1所覆盖然后看看代码，看看图片。
复制代码代码如下所示：
盒{。
身高：50px；
背景颜色：绿色；
}
实施结果：
你看到区别了吗yes.box3宽度没有定义；摆脱宽度没有定义默认的宽度是父元素的宽度，也就是说在这一点上，宽度：500px；浮动元素覆盖非浮动元素，也在200px宽度盒子前面有3是浮动的元素，文本与文本不包含原因位置后由浮动元素挤在200px
浮动元素不占块空间，所以三盒是100%父容器，500px宽度，但浮动元素占据了另一个空间，即排箱空间。
这也是文本在图片浮动后自动环绕图片的原因。浮动元素不占用块级空间，但影响块级元素和内联元素中的文本。
如果你想要的三框的宽度是一样的，那么只有三盒宽度：300px是必要的；
复制代码代码如下所示：
盒{。
宽度：300px；
身高：50px；
背景颜色：绿色；
}
实施结果：
在这里完成基本浮点运算时，有必要讨论这个问题。虽然浮动是好的，但是现实中会有很多问题：
boxbg {。
保证金：0汽车；
职位：相对；
宽度：500px；
边境：2px固体# CCC；
背景颜色：# CCD；
}
1 {。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：红色；
}
box2 {。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：蓝色；
}
盒{。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：绿色；
}
实施结果：
通常情况下，这是一个常见的问题。灰色背景应该和框架一样高，但事实总是令人不满意。）
这种情况的原因，所有的人都知道，这是因为浮动，是的，有很多地方是浮动，浮动元素会脱离普通流，所以普通的元素可以在浮动元素不存在，所以不会有开放的背景，但是认真看的学生会记住在浮动元素不提到块盒的效果，但会影响框架，即文本或内联元素，不管是块级元素和内联元素属于正常流动，如果浮动元素与众不同的流动，这将如何影响的框架事实上，我不想把这些概念性的东西纠缠是必要的。按照我的理解，浮动元素是块级元素在空间的水平都没有，在一个空间文本内联元素，所以这里就相当于上面的背景框架，所以不会影响背景元素去除，通常所说的浮动，不是说浮动元素清除浮动属性，而是清除浮动的元素在它的周围，所以它不是围绕浮动元素，所以如果你想盒三第二线路，明确：对不能用在2盒内；但在3箱在明确：左；
复制代码代码如下所示：
盒{。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：绿色；
明确：左
}
实施结果：
好啊!理解这个。让我们谈谈如何制作背景和盒子的高度。首先，最直接的方法是设置背景高度和框等于OK。当然，这不是重点。让我们来谈谈消除浮动。首先，看看例子。
复制代码代码如下所示：
boxbg {。
保证金：0汽车；
职位：相对；
宽度：500px；
边境：2px固体# CCC；
背景颜色：# CCD；
}
1 {。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：红色；
}
box2 {。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：蓝色；
}
盒{。
浮点数：左；
宽度：100px；
身高：50px；
背景颜色：绿色；
}
明确{。
宽度：100px；
身高：50px；
}
1帧
2帧
3帧
实施结果：
以上结果达到效果，这是直接添加一个高度相当的空元素，因为这个元素不浮动，所以它就像是背景，所以背景拉伸。事实上，清除浮动的原理是同样的，也是开放的背景的方式；明确的宽度，高度，和明确的属性被移除。
复制代码代码如下所示：
明确{。
清除：左；
}
实施结果：
可能不清楚。在这个透明的盒子里加几句试试。
实施结果：
因为清楚使用了清晰的：左边的摘要，没有左边的浮动元素，所以它必须显示在另一行中，所以你在地图上看到了结果，但是它仍然是一个元素支持的背景，当然，还有其他的方法来做。