今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题。一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误。Html与Css的问题都是大问题,因为一旦出现布局的出错,往往不是自己的代码有问题,而是自己对某个浏览器的概念不了解产生的错误。这点告诉我们,要不断地去实践,去遇到问题,才能让我们对浏览器的很多原理理解更加深刻。不要以为自己学的差不多了,其实你恰好处于没有入门的地步。所以一定要永远保持谦虚的心态去学习,你才能学到更多东西。
今天出现问题的地方是使用CSS3写手风琴效果的时候出现的。
出现错误:
出现这个错误时,一直搞不懂问题出现在哪里,因为自己设置了ul:hover,所以一旦鼠标出现在ul当中,所有的li就会缩小。而这里如果ul有高度的话,就会出现上图的情况,图中文字部分因为ul有高度,所以也会把所有的li缩小。所以这里就要使用ul崩溃的作用了,一旦ul没有高度,那么其就没有空白的部分了。而因为li还属于ul的一部分,所以还是会变化的。但是自己粗心地使用了overflow,使得浮动闭合了,这就导致了ul有高度。后来在http://www.iyunlu.com/view/css-xhtml/55.html当中了解到了清除浮动的原理,才知道自己错在哪里。这里很巧妙地使用了ul的高度崩溃,可见,这种并不一定是个bug,有时候反而可以利用这种短处来实现我们的目的。其实有时候技术并不是真正的局限,而思维才是真正的局限。另外,不要怕犯错,因为每一次错误都是你重新学习的机会。

float浮动引起的ul高度崩溃与overflow的关系的更多相关文章

  1. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  2. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  3. li浮动引起ul高度坍陷的解决方法

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

  4. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  5. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  6. [Web前端] 给li设置float浮动属性之后,无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  7. float浮动问题:会造成父级元素高度坍塌;

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

随机推荐

  1. [struts2]Struts遍历标签<s:iterator>总结 [转]

    转至:http://blog.csdn.net/lufeng66/article/details/7338098 struts2的s:iterator 可以遍历 数据栈里面的任何数组,集合等等 以下几 ...

  2. crontab command not found

    在服务器上运行 crontab -e编辑定时任务 结果提示 command not found命令找不到,这就说明没安装crontab 由于 完整操作如下: [root@iZ11pvsxisqZ /] ...

  3. java中如何使正在运行中的线程退出

    终止线程的三种方法      有三种方法可以使终止线程.      1.  使用退出标志,使线程正常退出,也就是当run方法完成后线程终止.      2.  使用stop方法强行终止线程(这个方法不 ...

  4. SpringMVC接收页面表单参数(转)

    作者:CN.programmer.Luxh 和java相关 一个普通的表单. 表单的代码如下: <%@ page language="java" contentType=&q ...

  5. Android实战技巧之六:PreferenceActivity使用详解

    一.写作前面 当我们做应用的时候,需要用户配置一些信息,而这就是通常所说的应用设置. 对于Android系统来说,系统本身的设置带来的用户体验和习惯已经深入人心,在我们的应用中同样用到类似的设置页, ...

  6. PureMVC(JS版)源码解析(十一):Model类

          这篇博文讲PureMVC三个核心类——Model类.Model类的构造函数及工厂函数[即getInstance()方法]和View类.Controller类是一样的,这里就不重复讲解了,只 ...

  7. virtualbox 安装windows系统的一些问题

    今天总结一下,使用virtualbox安装windows系统的一些问题. 安装的是Ghost的系统,正版系统也可以参考. 首先本人的机器原系统是ubuntu 16.04 LTS x64 1.win7或 ...

  8. 使用Android Studio时so文件打包不到APK中

    1,需要在build中添加如下配置,这是必备的 Android {   sourceSets {       main {           jniLibs.srcDirs = ['libs']   ...

  9. xml--小结④DTD的验证问题,不要用IE检验,IE不靠谱

    可以自己写代码 <script type="text/javascript"> var xmldoc = new ActiveXObject("Microso ...

  10. webrtc学习———记录三:mediaStreamTrack

    参考: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack 转自http://c.tieba.baidu.com/p/3 ...