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

最新推荐文章于 2022-04-24 10:59:34 发布

Marvel__Dead

最新推荐文章于 2022-04-24 10:59:34 发布

阅读量2.7k

点赞数 2

分类专栏： CSS3 文章标签：布局 css3

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/53066792

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>

Marvel__Dead

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
float布局和position布局的简单区别

float布局和position布局的区别这里要讲解的区别是float布局和position中的absolute布局的区别。因为它们两个都是把标签文档流中拉了出来。但是具体实现时，它们两个的效果又有点区别。float被称为浮动布局。属性值为:left,right,none;它的布局方式是把标签从文档流中拉出来，然后后面的标签就会填补当前标签的位置。如果不想要后面的标签填补上来就可以对后面的
复制链接

扫一扫