浮动，定位，与透明

1 浮动的副作用

清除浮动

html代码

代码块
<body>
<div class="clearfix">
    <div class="c c1"></div>
    <div class="c c2"></div>
</div>

<div class="c3"></div>
</body>

css代码

代码块
 body {
            margin: 0;
        }

        .c {
            height: 100px;
             100px;
        }

        .c1 {
            background-color: red;
            float: left;
        }

        .c2 {
            background-color: green;
            float: right;
        }

        .c3 {
            height: 200px;
             100%;
            background-color: blue;
        }
        .clearfix:after {
            content: "";
            clear: both;
            display: block;
        }

2绝对定位，相对定位，固定定位

html

代码块
<body>

<div class="c c1"></div>
<div class="c c2">
    <div class="cc "></div>
</div>
<div class="c c3"></div>
<div class="ccc">top</div>
</body>

css

代码块
body {
            margin: 0;
        }
        .c {
            height: 100px;
             100px;
        }
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: green;
            /*position: relative;*/
            /*left: 100px*/
        }
        .c3 {
            background-color: blue;
        }
        .cc {
            height: 200px;
             200px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px
        }
        .ccc {
            height: 50px;
             50px;
            background-color: lawngreen;
            color: white;
            position: fixed;
            right: 50px;
            bottom: 50px;

3 利用z-index显示遮罩层和浮层

html代码

代码块
<body>

<div class="cover"></div>
<div class="yingying"></div>
</body>

css

代码块
<!--遮罩层-->
        .cover {   
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0,23,128,0.1);
            z-index: 999;
        }
		
		<!--显示层-->
        .yingying {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
             400px;
            height: 200px;
            background-color: white;
            z-index: 1000;
        }

4 透明度的例子

透明度

html

代码块
<body>

<div class="c1">c1</div>
<hr>
<div class="c2">c2</div>
</body>

css

代码块
 .c1 {
            height: 200px;
             200px;
            background-color: red;
            opacity: 0.4;    <!--针对的是整体，包括文字-->
        }

.c2 {
            height: 200px;
             200px;
            background-color: rgba(255,0,0,0.4);
        }

别跑，点个赞再走