关于css float 属性以及position:absolute 的区别。_html/css

关于css float 属性以及position:absolute 的区别。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:04:03

原创

1053人浏览过

1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 css 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。div一个典型的块级元素，会单独占据一行。

先看看最基本的块级元素如何排列的。html代码，以下样式都是基于此。

<div class="boxBg">        <div class="box1">        框框1        </div>        <div class="box2">        框框2        </div>        <div class="box3">        框框3        </div></div>

登录后复制

css代码：

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc    }    .box1{    width:100px;    height:50px;    background-color:red    }    .box2{    width:100px;    height:50px;    background-color:blue    }    .box3{    width:100px;    height:50px;    background-color:green    }

登录后复制

执行结果：

稿定AI社区

在线AI创意灵感社区

查看详情

立即学习“前端免费学习笔记（深入）”；

由于div是块级元素，所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。有两种方式可以实现。第一种将display:inlin-block;

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc    }    .box1{    width:100px;    height:50px;    background-color:red;    display:inline-block    }    .box2{    width:100px;    height:50px;    background-color:blue;    display:inline-block    }    .box3{    width:100px;    height:50px;    background-color:green;    display:inline-block    }

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

至于中间的缝隙，追溯到本质原因是元素之间的空白符引起的，所以在父元素设置fone-size的大小，可以调节空白缝隙的大小。

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    font-size:34px;}

登录后复制

将font-size:34px之后，那么缝隙会变宽。

执行结果：

立即学习“前端免费学习笔记（深入）”；

同理，要去掉缝隙，那么需要将font-size:0;

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    font-size:0}

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

如此便实现了想要的布局，框里边的文字也跟着消失了，同样也证明文字的大小影响缝隙。只需要在子元素里重新设置就可以了。当然今天的重点并不是这个。同样的效果float:left;也可以轻松实现。

<style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:50px;    background-color:red;    float:left    }    .box2{    width:100px;    height:50px;    background-color:blue;    float:left    }    .box3{    width:100px;    height:50px;    background-color:green;    float:left    }</style>

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

元素添加 float之后，此浮动元素会在其碰到父级元素边框或者另一个浮动元素边框，紧邻其后显示。例如下边的例子，在浮动元素总宽度大于父级元素时，换行，换行的时候遇到前一个float并在其后显示

    <style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:100px;    background-color:red;    float:left    }    .box2{    width:100px;    height:50px;    background-color:blue;    float:left    }    .box3{    width:400px;    height:50px;    background-color:green;    float:left    }</style>

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

如果使用inline-block,结果会是怎样呢？

  <style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:100px;    background-color:red;    display:inline-block    }    .box2{    width:100px;    height:50px;    background-color:blue;    display:inline-block    }    .box3{    width:400px;    height:50px;    background-color:green;    display:inline-block    }</style>

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

此时框3是另起一行而不是跟在框1之后，(1,2之间的缝隙这里就不说了) 这也是一个使用inline-block和float的判断，如果模块宽度不一样使用float排版可能会导致跟预想结果不一样，所以在宽高不变的情况下使用float是极好的，如果不一致的话需要看具体的布局，使用恰当的属性。

以下贴代码，只贴修改的部分，其他不变，结构不变。

如果去掉box3的float：left会是什么结果？按照理解，浮动元素不占据空间，也就是框框3会无视框框1，框框2直接紧邻父元素的边框显示，也就是框框1会盖住框框3?那结果呢？

.box3{    width:100px;    height:50px;    background-color:green;}

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

为何框3的文字会出现在下边而不是被框1覆盖？接着看代码，看图

.box3{    height:50px;    background-color:green;}

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

看出不一样了没？是的。box3没有定义width;去掉了width,不定义宽度的情况下默认宽度就是父元素的宽度，也就是说此时width:500px;浮动元素覆盖非浮动元素，也就是框3前边200px的宽度被浮动元素覆盖了，之所以文字没有被覆盖而且文字被浮动元素挤在200px之后的位置，原因呢？

浮动元素不会占据块的空间，所以框三就是100%的父容器宽度 500px，但是浮动元素会占据另外的空间，也就是行框空间，通俗的讲就是文本所占的空间。

这也是图片float之后，文本会自动环绕图片的原因。浮动元素不占据块级空间，但会影响块级元素之内的文字以及内联元素。

如此的话如果想要三个框宽度一样，那么只需要将框三width:300px;

.box3{    width:300px;    height:50px;    background-color:green;}

登录后复制

执行结果：

立即学习“前端免费学习笔记（深入）”；

大家都在看：

css 中 float 浮动作用 css 中 float 浮动的使用场景 CSS的float属性怎么用？如何清除浮动？ PC网页设计中，Float 布局为何比Flex布局更受欢迎？为什么PC网站左右布局更倾向于使用float而不是功能更强大的flex？ PC网站布局为何常用float而非更强大的flex？