浮动中的overflow:hidden

最新推荐文章于 2024-07-20 16:23:06 发布

liangxz0311

最新推荐文章于 2024-07-20 16:23:06 发布

阅读量395

点赞数

分类专栏： CSS 文章标签：浮动 overflow hidden css

本文链接：https://blog.csdn.net/liangxz0311/article/details/44759229

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近一直为overflow这个属性感到困惑，因为很多时候用了它，会与想要的结果相差甚远，经过几个小时的测试，终于对overflow有了比较清晰的了解。这是一个小例子：

<!DOCTYPE html>
<html>
<head>
<title>overflow</title>
    <link rel="shortcut icon" href="images/1.jpg" type="image/x-icon">
    <style type="text/css">
        #out{width:200px;height:200px;background-color:#cc99ff;}
        #in{float:left;width:300px;height:300px;background-color:#ffccff;}
    </style>
</head>
<body>
    <div id="out">
        <div id="in"></div>
    </div>
</body>
</html>

网页显示如下：
外部的div并没有包含住内部div，内部div完全脱离文档流
给外部div加上overflow属性：#out{overflow:hidden;width:200px;height:200px;background-color:#cc99ff;}
网页显示如下：
添加overflow属性后，外部div包含住内部div
由此可见，overflow有两个作用：(1)消除浮动(2)隐藏溢出。