开发者社区> 问答> 正文

overflow:hidden属性疑问

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

展开
收起
杨冬芳 2016-06-23 16:16:11 2556 0
1 条回答
写回答
取消 提交回答
  • IT从业

    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元素不存在
    screenshot
    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的效果相同
    如图所示:
    screenshot

    2019-07-17 19:46:31
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载