清除絕對定位之影響

本文轉載自查看原文 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對定位元素的影響為什么設置overflow為hidden可以清除浮動帶來的影響什么是浮動？浮動帶來的影響？怎么清除浮動？ css 清除浮動定位 z-index屬性 CSS3中三種清除浮動（float）影響的方式 css清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？一起來$('.float') position_relative+absolute 搭配使用，實現絕對定位放大縮小都不影響其絕對位置