清除绝对定位之影响

本文转载自查看原文 2018-10-10 17:53 2135 html

<!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>

float演练

div1

div2

div3

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 大学总结之影响我最深的十本书 float的影响及清除float 浮动的影响及如何清除浮动带来的影响绝对定位对元素宽度的影响 transform对定位元素的影响 transform对定位元素的影响为什么设置overflow为hidden可以清除浮动带来的影响什么是浮动？浮动带来的影响？怎么清除浮动？ fixed定位怎么失效了（transform对fixed定位的影响） CSS浮动并清除浮动(造成的影响)