码迷,mamicode.com
首页 > 其他好文 > 详细

div清除绝对定位的影响

时间:2020-07-02 23:19:35      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:ack   div2   pad   highlight   color   and   body   大小   epp   

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float演练</title>
    <style>
        #div1 {
            border: 2px;
            background-color: deeppink;
            width: 800px;
            height: 600px;
            position: relative;
        }
        /*当元素绝对定位后,会脱离文档流,这时候用清除浮动的方式实现不用*/
        #div2 {
            border: 2px;
            background-color: sandybrown;
            width: 200px;
            height: 100px;
            position: absolute;
            left: 20px;
            top: 10px;
        }

        #div3 {
            border: 2px;
            background-color: darkred;
            width: 200px;
            height: 100px;
        }
         /*新建一个元素顶替因绝对定位失去的文档流,大小,高度都一样*/
         #padding {
            border: 2px;
            /*background-color: red;*/
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">div1
    <div id="div2">div2</div>
    <div id="padding" style="clear: both"></div>
    <div id="div3">div3</div>
</div>

</body>
</html>

  

div清除绝对定位的影响

标签:ack   div2   pad   highlight   color   and   body   大小   epp   

原文地址:https://www.cnblogs.com/1500418882qqcom/p/13227769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!