清除浮动css详解

CSS定位position：

static relative abslute fixed

1.relative相对定位

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>
    <body>
        <div class="s1">内容一</div>
        <div id="special"class="s1">内容一</div>
        <div class="s1">内容一</div>
        <div class="s1">内容一</div>
                <div class="s1">内容一</div>
        <div class="s1">内容一</div>
    </body>
</html>

View Code

left 与top来进行定位，参照点是它原来的位置作为参照点

2.abslute绝对定位（对离自己最近的元素为参照点）

此时的参照为body

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>

    <body>
        <div class="s1">内容一</div>
        <div class="s1" id="special">内容二 </div>
        <div class="s1">内容三</div>
        <div class="s1">内容四</div>
        <div class="s1">内容五</div>
        <div class="s2">HELLO</div>
    </body>

</html>

View Code

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}
.s2{
    position: relative;
    left: 200px;
    top: 100px;
     300px;
    height: 100px;
    background: green;
    float: left;
}

View Code

以离自己最近的非标准流作为参考点

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>

    <body>
        <div class="s1">内容一</div>

        <div class="s1">内容三</div>
        <div class="s1">内容四</div>
        <div class="s1">内容五</div>
        <div class="s2">
            <div class="s1" id="special">内容二 </div>
        </div>
    </body>

</html>

View Code

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}
.s2{
    position: relative;
    left: 200px;
    top: 100px;
     300px;
    height: 100px;
    background: green;
    float: left;
}

View Code

3.static

left与right没有

4.fixed

类似于absoute但是包含块是视窗本身body

只认body

相关阅读:
工作笔记(一)
如何修改mindmanager默认字体为微软雅黑
 彻底解决zend studio 下 assignment in condition警告
 PHP5.2至5.6的新增功能详解
 ThinkPHP中的模型命名
 12大网站建设技巧让访客信任你
 CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14
几种不错的编程字体
 大型网站的灵魂——性能
 MySQL: InnoDB 还是 MyISAM?
原文地址：https://www.cnblogs.com/helloworld2019/p/10910364.html