<!DOCTYPE html>

 <html lang="zh">

 <head>

   <meta charset="UTF-8">

   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <title>Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">

   <style>

     *{

       padding: ;

       margin: ;

     }

     .test{

       width: 102px;

       margin-top: 100px;

       margin-left: 100px;

     }

     .test ul{

       overflow: hidden;

     }

     .test ul li{

       /*display: block;*/

       float: left;

       border: 1px solid #;

     }

     .test1{

       display: block;

       width: 100px;

       height: 50px;

       line-height: 50px;

       background-color: red;

       overflow: hidden;

     }

     .test1 p{

       float: left;

     }

   </style>

 </head>

 <body>

   <div class="test">

     <ul>

       <li>

         <div class="test1">

           <p>我发的是</p>

         </div>

       </li>

     </ul>

   </div>

 </body>

 </html>

给li里面的div设置overflow: hidden就会西湖此案这个问题

如果去掉overflow: hidden或者给li设置display:block或者display:inline-block就正常，不懂为什么

下面这个是网上找到的，但是和我遇到的问题还是有差距

转：https://my.oschina.net/u/214483/blog/663133

工作中遇到的一个问题，设置inline-block元素的overflow：hidden意外增加元素总体高度。

描述如下：

设 A为子容器，B为父容器。

A设置为inline-block，并且overflow为hidden，A高度为23，B高度为30。

A设置为block，A高度为23，B高度为23。

通过stackoverflow找到原因（http://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container），摘抄如下：

Let me explain to you why this is happening.

According to CSS 2.1 Specs,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

To explain in simple words,

i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line. ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.

So, in your case the inline-block cell has overflow:hidden (not VISIBLE), so its margin-bottom, the border of cell is at the baseline of the container element container.

That is why the element cell looks pushed upwards and the height of container appears increased. You can avoid that by setting cell to display:block.

翻译如下：

'inline-block'的baseline是其在normal flow中的最后一个line box的baseline，除非它没有in-flow line boxes，或者其‘overflow’属性不等于‘visible’，这种情况下，其baseline位于bottom margin边上。

解释如下：

i) 如果inline-block的overflow设为visible（默认属性），则其baseline是当前行的containing block的baseline。

ii) 如果overflow设为其他，则其bottom margin位于前行的containing block的baseline；

我们这种情况下，inline-block元素的overlow：hidden，所以元素的底部边框在父元素的baseline。

因此高度才会看起来增加了。

可以将inline-block设为block，即可解决问题。

关于overflow: hidden;的一个诡异问题的更多相关文章

  1. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  2. 特别的表格（overflow：hidden的一个小应用）

    做多个li,对各个边的边框有不同的要求,三层盒子,第一层盒子放li,设置右边和下边的虚线边框,浮动,第二层盒子ul设置宽度使li排列,第三层盒子最大的盒子,使用overflow:hidden,宽度高度 ...

  3. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  4. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  6. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  7. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  8. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

  9. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

随机推荐

  1. idea log4j 用法

    1.导入jar包 这里用的maven导入 <!-- LOGGING begin --> <dependency> <groupId>org.slf4j</gr ...

  2. oracle 创建表空间 与创建用户与分配用户权限

    创建一个表空间名为ABC create tablespace "ABC"     //貌似要大写 datafile 'D:\oracle\TBSPACES\ABC.dbf'   / ...

  3. 【BZOJ4477】[JSOI2015]字符串树（Trie树）

    [BZOJ4477][JSOI2015]字符串树(Trie树) 题面 BZOJ 题解 对于每个点维护其到根节点的所有字符串构成的\(Trie\),显然可持久化一下就很好写了. 然后每次询问就是\(u+ ...

  4. CentOS服务器配置SSH免密码登录

    由于工作需要,经常要登录到多台服务器远程操作,每次都是ssh user@host:port 再输入密码,时间长了,难免觉得乏味-- 故而从度娘那里扒来了一些让SSH免密码登录的办法,其实这也是使用Gi ...

  5. 安装完打开 eclipse 提示 JVM 版本较低

    在安装完 eclipse 后打开出现如下提示 解决办法: 1> 去官网下载最新版本安装 地址 2> linux 下直接下载安装 1.打开终端 2.控制台输入:su 3.控制台输入个人密码 ...

  6. 【转】如何快速识别应用MOS管，几张图片就搞定了

    三极管是流控型器件,MOS管是压控型器件,两者存在相似之处.三极管机可能经常用,但MOS管你用的可能较少.对于MOS管先抛出几个问题: 如何区分P-MOS和N-MOS: 如何区分MOS的G.D.S管脚 ...

  7. PHP使用serialize和json_encode序列化数据并通过redis缓存文件和$GLOGALS缓存资源对象

    PHP常用缓存方式:第一种,把需要缓存的数据进行处理,形成PHP可以直接执行的文件.在需要缓存数据的时候,通过include方式引入,并使用.第二种,把需要的数据通过serialize函数序列化后直接 ...

  8. MySQL的DML常用语法格式

    MySQL的DML常用语法格式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们知道MySQL的查询大致分为单表查询,多表查询以及联合查询.多表查询,顾名思义,就是查询的结果可能 ...

  9. 安装R和Rstudio

    安装R和Rstudio 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.安装R编程语言 1.登录下载网站 https://cran.r-project.org/ 2.点击下载链 ...

  10. .net MVC框架里怎么写控件

    .net的MVC框架如果选择了Razor引擎就需要自己来写控件了,这里列出了一些简单的控件的书写方法 @*这是TextBox控件的写法*@ @Html.TextBox("textbox1&q ...