position float的用法

来源：互联网发布：mac队基地编辑：程序博客网时间：2024/06/05 00:21

<html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        *{            padding:0;            margin:0;            box-sizing:border-box;        }        #one{            width:300px;            height:200px;            position:absolute;            left:50%;            top:50%;            background-color: darkorchid;        }        .box{            width:800px;            height:300px;            background-color: aquamarine;        }    </style></head><body><div class="box">    <div id = "one"></div></div></body></html>

效果图为:
这里写图片描述

使用absolute定位后，元素是脱离文档流的.这里我们只对one增加了absolute属性,而父级元素并没有设置position属性.所以我们可以得出:当父级元素没有absolute属性时，则相对于document来定位.

这里要注意:元素是不可以同时使用绝对定位和浮动属性的.

我们再把父级元素的position加上后又是什么效果呢?

这里写图片描述

这时可以看到one这个元素是相对于父元素来定位的，所以叫绝对定位.

position:fixed

相对于浏览器窗口来定位的

这里要注意:元素是不可以同时使用固定定位和浮动属性的.

position:sticky

我们也来看一个例子:

"><head>    <meta charset="UTF-8">    <style type="text/css">    .container{        background-color: #eee;        width:200px;        height:100px;        margin:0 auto;        overflow:scroll;    }    .box{        position:-webkit-sticky;        position:sticky;        height:40px;        background-color: aquamarine;        top:0;        margin-bottom:20px;    }    div{        font-size:30px;        line-height:40px;        text-align:center;        color:#fff;    }    </style></head><body><div class="container">    <div class="box">内容1</div>    <div class="box">内容2</div>    <div class="box">内容3</div>    <div class="box">内容4</div>    <div class="box">内容5</div></div></body></html>

可以自己尝试一下，这里box里的top：0叫做阈值，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位.

float的用法

总结完了position,我们再来总结一下float的用法

影响周围元素

浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕

解决浮动的问题

方法1

<div style="clear:both"></div>
在父级元素的最后增加这个

方法2

.clearfix{overflow:hidden;}
给父级元素添加hidden,这个方法触发了BFC.如果不了解BFC,可以看看理解BFC

方法3

clearfix:after{        display:block;        content:'';         clear:both;         height:0;        visibility:hidden;}

对父级元素设置after伪元素属性

阅读全文

0 0

position float的用法

目录

position的用法

position:static(默认)

position:relative

position:absolute

position:fixed

position:sticky

float的用法

影响周围元素

解决浮动的问题