overflow:hidden属性疑问

enchanter
  • 23

代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <meta charset="utf-8">
    <style type="text/css">
        a {
            text-decoration: none;
        }
        .center {
            display: table;
            margin: 100px auto 0 auto;
        }
        .post {
            overflow: hidden;
            border: 1px solid #e3e3e3;
            padding: 5px;
        }

        .post .avatar {
            height: 60px;
            widows: 60px;
            border-radius:50%;
        }

        .post .content {
            padding: 0 10px;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="container-fluid center" style="width:100%">
        <div class="row-fluid">
            <div class="post row-fluid">
                <a href="#" class="pull-left">
                    <img class="avatar" src="http://img.woyaogexing.com/2016/06/20/2f138695affe29d0!200x200.jpg"/>
                </a>
                <div class="content">
                        <p>李家老四</p>
                        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
                </div>
            </div>
        </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

当我在.post .content 去除了overflow:hidden;时,content里面的内容就会跟图片产生围绕的效果,请问这是为啥?

回复
阅读 4k
5 个回答
✓ 已被采纳

1.a.pull-left的设置了float:left(通过浏览器控制台查看CSS实际CSS样式),就作为一个块级元素脱离正常文档流被渲染
2.如果div.content不设置overflow:hidden,那么div.content是一个普通的div块级别元素,其左上角将对齐其包含块元素的左上角。并且位于a.pull-left元素的下方,按float元素的特点,其周边元素的文本将围绕其显示
如图所示,可以理解为布局div.content元素时权当a.pull-left元素不存在
图片描述
3.如果div.content设置overflow:hidden,那么div.content构成一个独立的BFC(块级格式化上下文),而一个BFC区域不会与float元素重叠并且其中的子元素对外部元素在布局上互不影响(这点和非BFC区域不同);那么导致的结果就是div.content元素向右移动直到和a.pull-left元素区域不发生重叠(div.content元素的左外边距和a.pull-left元素右外边距不重叠),此时的效果和div.content设置float:left的效果相同
如图所示:
图片描述

因为a标签设置了float,.content要设置margin-left:70px

overflow:hidden能够清除浮动float,至少看上去是具有clear:both的效果。

clipboard.png

未去掉overflow:hidden之前的效果,可以看到清除了a标签浮动的影响

clipboard.png

去掉了overflow:hidden之后的效果,受到float的影响,可以看到div.content块和a标签块重合在一起了,文字和图片产生了围绕效果。

具体为什么overflow:hidden会有这样的效果,请直接google "overflow float"关键词详细了解。

触发了BFC(blockFormatingContext)可以不和浮动元素重叠,消除上下相邻元素外边距叠加,清除内部元素浮动。

心叶
  • 303

因为设置overflow:hidden以后触发了BFC,由于BFC的性质,其是页面上一个隔离的容器,和外面的关系是不会互相影响,因此如果文字和图片产生了围绕效果,就不符合这个原则,因此就看起来好像清除浮动了,其实没有哦。更具体的可以参考我写的这篇文章:https://segmentfault.com/a/11...

宣传栏