1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动

 <!DOCTYPE html>

 <html>

 <style>

     * {

         margin: 0;

         padding: 0;

     }

     ul {

         list-style-type: none;

         overflow: hidden;

         background-color: #333;

     }

     li {

         float: left;

     }

     li a {

         display: block;

         color: red;

         text-align: center;

         padding: 14px 16px;

         text-decoration: none;

     }

 </style>

 <meta charset="utf-8">

 <body>

     <ul>

         <li><a class="active" href="#home">Home</a></li>

         <li><a href="#news">News</a></li>

         <li><a href="#contact">Contact</a></li>

         <li><a href="#about">About</a></li>

     </ul>

 </body>

 </html>

2.出现如下显示, 宽度为浏览器宽度

3. 去掉overflow: hidden后, 可以看到

(尾巴在这儿)

4. 为什么去掉ul去掉overflow: hidden之后没在了, 其实不是没在了, 看到由于没有设置高度, height: auto为自动值, 就是根据里面的内容自动设置高度, 但是li设置了左浮动, 已经浮动起来了属于浮动流, 不在普通流中, 但是ul还是在普通流, 他普通流中的内容为空, 所以没有高度.

5. 做个实验, 去掉ul的overflow: hidden后, 在里面加入一个普通流的<span>, 可以看到下面效果, ul的高度就是span撑起来的高度

     <ul>

         <span style="color:white">我是普通流</span>

         <li><a class="active" href="#home">Home</a></li>

         <li><a href="#news">News</a></li>

         <li><a href="#contact">Contact</a></li>

         <li><a href="#about">About</a></li>

     </ul>

6. 绕了一圈, 回到正题, 首先说下overflow的意思: 属性规定当内容溢出元素框时发生的事情, w3school解释如下, 简单的说hidden 的意思是超出的部分要裁切隐藏掉

7. 那么如果 float 的元素li不占普通流位置,

　普通流的包含块ul设置了overflow: hidden要根据内容高度裁切隐藏,

　并且ul高度是默认值auto, 那么不计算其内浮动元素高度就裁切就有可能会裁掉float的li

这是反布局常识的

　所以如果没有明确设定容器ul高情况下

　它要计算内容全部高度才能确定在什么位置hidden

　浮动流的高度就要被计算进去, 就是li的高度,

　一计算进去就顺带达成了清理浮动的目标

css 中 overflow: hidden清楚浮动的真正原因的更多相关文章

  1. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  2. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  3. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  4. CSS 的overflow:hidden (清除浮动)

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

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

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

  6. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  7. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  8. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  9. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

随机推荐

  1. Python（面向对象3 ——实例）

    这个小东西包括了最近学习的,包括模块.包.序列化.继承.派生.组合的应用举例.整体架构如图: bin是程序入口,core包括了几个主要逻辑,main是主架构,login包括登录功能,register包 ...

  2. 分页和Cookie、Session

    分页和Cookie.Session 分页 自定义分页 函数班 from django.shortcuts import render # Create your views here. data = ...

  3. 在w3cschool学完html,css，javascript，jquery以后，还是不会做前端怎么办？

    w3cschool是一个非盈利性的在线技术学习网站,提供按W3C标准编写的基础教程.完整的看完w3cschool上面的手册,可以基本掌握编程语法.基础性的东西通常都会比较零散,因此,在学习一段时间后, ...

  4. [MongoDB] 学习笔记（2）

    1. Mac 安装mongodb: 官网下载mac版mongodb,解压到本地目录,如/Applications/mongodb,注意这里的地址是根更目录下的Applications,然后在根目录下创 ...

  5. Mac下 javac java 进行编译和运行含有包路径及引入jar包的类

    近两天因为刚入职,属于熟悉环境的阶段,研究了下算法(第四版),当不使用IDE工具直接使用终端进行javac 编译带有包的类,然后使用java 会出现如下错误提示: 使用谷歌搜索了很久,终于找到解决的办 ...

  6. Java最新趋势之Spring阅读

    (原文地址:点我) This Week in Spring: Cloud Native and the State of Java This compilation of news and tutor ...

  7. $python正则表达式系列（3）——正则内置属性

    本文主要总结一下python正则的一些内置属性的用法. 1. 编译标志:flags 首先来看一下re.findall函数的函数原型: import re print('[Output]') print ...

  8. hadoop16---反射

    框架配置文件中,从字符串获取类和实例,调他的方法. 通过反射的方式可以获取class对象中的属性.方法.构造函数等,一下是实例: package cn.itcast_04_reflect; impor ...

  9. knudson hypothesis 二次突变假说

    二次突变假说是由诺丁在1953年提出的,他发现似乎随着年龄的增长,患有癌症的概率有上升.对这种现象有一种解释,即癌症的发生需要多个突变的累积. 克努森在1971通过研究正式地提出该观点.他对具有遗传性 ...

  10. elasticsearch报错[WARN ][bootstrap ] Unable to lock JVM Memory: error=12,reason=Cannot allocate memory，解决

    早上在服务器上安装elasticsearch集群,在其中的一台上面安装好elasticsearch之后安装了一些插件,其中一个插件是marvel,结果可能是新版本不支持这个插件,就没有安装成功,也就索 ...