float 及 overflow 的理解

1、CSS 盒子模型：

 

2、float 支持属性：left right none inherit（部分支持）

    （1）float 属性影响范围：对紧随其后的块儿级元素起作用。

    （2）清除浮动常用方法：在受影响的元素上

     

     （3）对overflow：hidden 的理解

            例如：

           

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .wrap{
            width: 80%;
            margin:0 auto;
        }
        .content{
            background-color: gray;
            /*height: 500px;*/
            /*overflow: hidden;*/
        }
        .left{
            width: 80%;
            height: 300px;
            background-color: aqua;
            float: left;
        }
        .right{
            width: 10%;
            height: 800px;
            background-color: yellow;
            float: left;
        }
        .footer{
            background-color: red;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="content">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

</body>
</html>

（1）浮动后，footer 挤到顶部

（2）parent 加上 overflow:hidden;

    •  我们原先的理解是，在一个平面上的浮动，但是通过试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个 属性中的解释，清除浮动是什么意思了。
    • 当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个 div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是overflow的含义！           　　　　
posted @ 2016-06-18 22:20  月是故乡明95  阅读(1505)  评论(0)  编辑  收藏  举报