float 

float 浮动提升层级。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        浮动提升层级。
        浮动提升半层。
        一个元素分两层：上层是文字相关的东西（不提升），下层是盒模型相关的东西（提升）。
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        #up{
            float:left;
            background: pink;
            opacity: 50%;
        }
        #down{
            /*float:left;*/
            background: deeppink;
        }
    </style>
</head>
<body>
<div id="up">
    upupupup

</div>
<div id="down">
    downdowndown

</div>
</body>
</html>

 

posted @ 2021-02-10 11:16  xiluhua  阅读(81)  评论(0)  编辑  收藏  举报