详细分析css float属性和position:absolute的区别

1.1.float属性定义了元素浮动的方向。在过去，这个属性总是被应用到图像上，所以文本被包裹在图像周围，但是在CSS中，任何元素都可以浮动。浮动元素生成块级别的框，不管它是什么类型的元素。典型的块级元素div占用一行。让我们看看最基本的块级元素是如何排列的。以下样式所基于的Html代码。复制代码如下： div class=' boxbg ' div class=' box1 ' frame 1/div div class=' box2 ' frame 2/div div class=' box3 ' frame 3/div/div CSS代码：复制代码如下： boxbg { margin 3360 0 0 auto；宽度width:500px高度：200 px；border:2px实心# CCC } . box 1 { width :100 px；高度：50 px；背景-color : red } . box 2 { width :100 px；高度：50 px；背景-color:blue }，box3 { width:100px高度：50 px；后台-color:green}执行结果：。

因为div是块级元素，所以盒子是垂直排列的。实际上，通常需要水平排列框架。有两种方法可以做到这一点。第一个是显示： inlin-block；复制的代码如下：boxBg { margin: 0 auto宽度width:500px高度：200 px；border:2px实心# CCC } . box 1 { width :100 px；高度：50 px；背景色：红色；display : inline-block } . box 2 { width :100 px；高度：50 px；背景-颜色：蓝色；display : inline-block } . box 3 { width :100 px；高度：50 px；背景-颜色：绿色；显示器：内联块的执行结果：。

至于中间间隙，本质原因是元素之间的空白字符，因此在父元素中设置fone-size可以调整空白间隙的大小。复制的代码如下：boxBg { margin: 0 auto宽度width:500px高度：200 px；border:2px固体# cccfont-size :34 px；} font-size :34 px后，差距会拉大。实施结果：

同样，要去掉这个间隙，font-size :0；复制的代码如下：boxBg { margin: 0 auto宽度width:500px高度：200 px；border:2px固体# ccc实施结果：

这样就实现了想要的布局，盒子里面的文字也消失了，这也证明了文字的大小影响了间隙。只需在子元素中重置它。这当然不是今天的重点。相同效果float:left并且容易实现。复制的代码如下：style。boxbg { margin33600auto宽度width:500px高度：200 px；border:2px固体# ccc} . box 1 { width :100 px；高度：50 px；背景色：红色；float : left } . box 2 { width :100 px；高度：50 px；背景-颜色：蓝色；float : left } . box 3 { width :100 px；高度：50 px；背景-颜色：绿色；Float:left }/style执行结果：

向元素添加浮动后，浮动元素将在遇到父元素或另一个浮动元素的边框后立即显示。例如，在下面的示例中，当浮动元素的总宽度大于父元素的总宽度时，会有一条线断开。当线断开时，会遇到前一个浮动，复制代码稍后显示如下： style . box BG { margin 33600 auto；宽度width:500px高度：200 px；border:2px固体# ccc} . box 1 { width :100 px；高度：100 px；背景色：红色；float : left } . box 2 { width :100 px；高度：50 px；背景-颜色：蓝色；float : left } . box 3 { width :400 px；高度：50 px；背景-颜色：绿色；Float:left }/style执行结果：

如果使用内联块，会发生什么？复制的代码如下：style。boxbg { margin33600auto宽度width:500px高度：200 px；border:2px固体# ccc} . box 1 { width :100 px；高度：100 px；背景色：红色；display : inline-block } . box 2 { width :100 px；高度：50 px；背景-颜色：蓝色；display : inline-block } . box 3 { width :400 px；高度：50 px；背景-颜色：绿色；显示：内嵌块}/样式执行结果：

此时，框3从另一行开始，而不是跟随框1。(这里没有提到1和2之间的差距。)这也是使用内联块和浮点的判断。如果模块宽度不同，使用浮动排版可能会导致不同的预期结果。因此，最好使用宽度和高度相同的浮子。如果不一致，就要看具体布局，使用合适的属性。粘贴以下代码，仅粘贴修改部分，其余部分不变，结构不变。如果盒子3的左边的浮体被移除会发生什么？根据理解，浮动元素不占空间，即第3帧将忽略第1帧，第2帧将直接显示在父元素的边框附近，即第1帧将覆盖第3帧？结果呢？复制的代码如下： box 3 { width :100 px；高度：50 px；背景-颜色：绿色；}实施结果：。

为什么方框3中的文字出现在下面，而不是被方框1覆盖？然后看代码，复制代码如下： box 3 { height :50 px；背景-颜色：绿色；}实施结果：。

看到区别了吗？是Box3没有定义宽度；没有宽度，默认宽度是未定义宽度时父元素的宽度，也就是说此时的宽度width:500px浮动元素覆盖非浮动元素，即盒子3前面200px的宽度被浮动元素覆盖。文本没有被覆盖，被浮动元素挤在200px后面的原因是什么？浮动元素不会占用块的空间，所以第三个框是父容器宽度500px的100%，但是浮动元素会占用另一个空间，也就是行框空间，一般是文本占用的空间。这就是文本浮动后自动环绕图片的原因。浮动元素不占用块级空间，但会影响块级元素和内联元素中的文本。在这种情况下，如果希望三帧的宽度相同，只需要将三帧的宽度改为：300px复制的代码如下： box 3 { width :300 px；高度：50 px；背景-颜色：绿色；}实施结果：。

既然我们已经完成了基本的浮动，我们应该谈谈问题。虽然浮动很容易使用，但在实践中会出现许多问题。例子：风格。boxBg { margin: 0 auto位置：相对；宽度width:500pxborder:2px固体# ccc背景-color : # CCD；} . box 1 { float : left；宽度width:100px高度：50 px；背景色：红色；} . box 2 { float : left；宽度width:100px高度：50 px；背景-颜色：蓝色；} . box 3 { float : left；宽度width:100px高度：50 px；背景-颜色：绿色；}/style执行结果：

很常见的问题，正常情况下。应该是灰色的背景会和边框一样高，但事实总是不尽人意。)造成这种情况的原因已知是浮动造成的。是的，它是浮动的。很多地方说浮动元素会脱离普通流，所以普通元素可以视为浮动元素，所以这里不开背景。但是，仔细阅读的同学会记住，上面提到的浮动元素不会影响块框架，但会影响行框架，即文本或。其实我觉得没必要纠结这些概念性的东西。根据我的理解，浮动元素与块级元素不在同一个水平空间，而是与文本内联元素在同一个空间，所以这里的边框相当于背景上方，所以不会影响背景元素。清除浮动通常的说法是不要移除浮动元素的浮动属性，而是清除它们周围的浮动元素，这样它们周围就没有浮动元素了。因此，如果您想要第三行和第二行框，则不能在框2中使用clear:right。相反，在方框3中使用clear:left复制的代码如下： box 3 { float : left；宽度width:100px高度：50 px；背景-颜色：绿色；Clear:left}执行结果：

好的。了解了这一点，我们再来说说如何让背景和框架相等。首先，最直接的方法是直接设置背景高度等于边框，然后点击Ok。当然，这不是重点。让我们谈谈清除浮体。先看例子：复制代码如下：doctypehtmlhearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/style。boxBg { margin: 0 auto位置：相对；宽度width:500pxborder:2px固体# ccc背景-color : # CCD；} . box 1 { float : left；宽度width:100px高度：50 px；背景色：红色；} . box 2 { float : left；宽度width:100px高度：50 px；背景-颜色：蓝色；} . box 3 { float : left；宽度width:100px高度：50 px；背景-颜色：绿色；} .clear { width:100px高度：50 px；}/style/head body div class=' boxbg ' div class=' box1 ' frame 1/div class=' box2 ' frame 2/div div class=' box3 ' frame 3/div div class=' clear '/div/div/body/htmlexecution result:(9512 . 163.com)。

上面的结果达到了效果，显然直接添加了一个高度相等的空元素。因为这个元素不是浮动的，所以和背景一样，所以背景是打开的。其实清漂的原理和这个是一样的，也是在努力打开后台；上面去掉了clear的宽度和高度，clear属性的复制代码如下： clear { clear : left；}实施结果：。

这可能不清楚。在清除框中加几个字试试实现结果：。

Clear使用clear:left。综上所述，clear的左侧不能有浮动元素，所以必须单独一行显示。所以我们可以在图片上看到结果，但它仍然是一个带有元素的背景。当然，还有其他方法可以实现。这里主要是说清楚，飘就可以了。