float布局和position布局的简单区别

来源：互联网发布：淘宝50字万能好评编辑：程序博客网时间：2024/06/11 21:54

float布局和position布局的区别

这里要讲解的区别是float布局和position中的absolute布局的区别。因为它们两个都是把标签文档流中拉了出来。但是具体实现时，它们两个的效果又有点区别。

float被称为浮动布局。

属性值为:left,right,none;

它的布局方式是把标签从文档流中拉出来，然后后面的标签就会填补当前标签的位置。
如果不想要后面的标签填补上来就可以对后面的第一个标签写上
clear:both;的样式。clear的属性值可以是:left,right,both,none;
设置了float属性的标签还会影响到下一个标签的内容。float布局过程

效果图:
这里写图片描述

很明显可以看到橘黄色div里面的文字就被影响到了。

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float的区别</title>    <style>        .div1{            height: 100px;            background: #7CF45C;        }        .div2{            width: 600px;            height: 400px;            background: #aaaaaa;            float: left;        }        .div3{            height: 300px;            background: #e5642b;        }    </style></head><body><div class="div1">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div><div class="div2">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div><div class="div3">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div></body></html>

2.position布局

position布局中的absolute只是把标签从文档流中拉了出来，后面的标签就会向上填充。但是设置了position的标签不会影响到填充上来标签中的内容。但是会掩盖它的内容。
position布局详情请看:position布局关键点详解

效果图:
这里写图片描述

很明显，绿色div中的字体被掩盖了。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>position的区别</title>    <style>        .div1{            height: 100px;            background: #F9AF1F;        }        .div2{            width: 600px;            height: 400px;            background: #aaaaaa;            position: absolute;        }        .div3{            height: 300px;            background: #7CF45C;        }    </style></head><body><div class="div1">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div><div class="div2">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div><div class="div3">这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。</div></body></html>

0 0