overflow 在float浮动标签里的作用

aechi62008

于 2016-07-07 18:59:00 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/daowangzhizhu-pt/p/5651301.html

版权

overflow可以使浮动元素回归文档流，但是浮动元素却仍然具有浮动的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float与overflow</title>
    <style>
        body{
            margin: 0px;
            padding:0px;
        }
        div{
            width:150px;
            border:1px solid black;
            
            overflow: hidden;
        }
        div div{
            border:1px solid red;
            background-color:#fdedd2;
            float:right;
            width:50px;
            height:50px;

        }
        p{
            margin: 0px;
            padding: 0px;
            border: 1px solid red;
            width: 50px;
            height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>p</p>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>