<!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. helm的安装于与简单使用

    根据 csdn 博客整理学习 原始博客地址: https://blog.csdn.net/weiguang1017/article/details/78045013 1. 下载所需要的文件: 客户端文 ...

  2. BZOJ2442 Usaco2011 Open修剪草坪（动态规划+单调队列）

    显然可以dp.显然可以单调队列优化一下. #include<iostream> #include<cstdio> #include<cmath> #include& ...

  3. Optimal Milking POJ - 2112 （多重最优匹配+最小费用最大流+最大值最小化 + Floyd）

      Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 19347   Accepted: 690 ...

  4. 如何设置Java虚拟机JVM启动内存参数

    Tomcat默认的Java虚拟机JVM启动内存参数大约只有64MB或者128MB,非常小,远远没有利用现在服务器的强大内存,所以要设置Java虚拟机JVM启动内存参数.具体设置方法为: Tomcat修 ...

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

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

  6. dp乱写2:论dp在不在dp中（但在dp范畴）内的应用

    最近正儿八经的学习了dp,有一些题目非常明显看出来就是dp了比如说:过河卒.方格取数.导弹拦截.加分二叉树.炮兵阵地更加明显的还有:采药.装箱问题.过河.金明的预算方案.今天来谈谈dp的dp在不在dp ...

  7. 【bzoj4009】 HNOI2015—接水果

    http://www.lydsy.com/JudgeOnline/problem.php?id=4009 (题目链接) 题意 给出一颗无根树.有一些路径记为$P_i$,这些路径有两个端点和一个权值$W ...

  8. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  9. java lock锁住特定对象

    由于lock没有锁住特定对象的概念,该如何做到像synchronized同步块一样的效果呢? 答案:为每一个需要加锁的对像分配一把锁. 示例: List<User> users = new ...

  10. 解题：APIO 2018 铁人两项

    题面 建立圆方树,考虑所有路径,发现路径上原来的点双(现在的方点)里的点都可以做中间点.但是路径上被方点夹着的圆点被计重了,要扣掉:枚举的两个端点也被算进去了,要扣掉.所以直接将方点权值设为点双大小, ...