HTML5技术

float浮动引起的ul高度崩溃与overflow的关系 - 剑无锋

字号+ 作者:H5之家 来源:博客园 2015-11-24 08:05 我要评论( )

今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题。一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误。Html与Css的问题都是大问题,因为一旦出现布局的出错,

    今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题。一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误。Html与Css的问题都是大问题,因为一旦出现布局的出错,往往不是自己的代码有问题,而是自己对某个浏览器的概念不了解产生的错误。这点告诉我们,要不断地去实践,去遇到问题,才能让我们对浏览器的很多原理理解更加深刻。不要以为自己学的差不多了,其实你恰好处于没有入门的地步。所以一定要永远保持谦虚的心态去学习,你才能学到更多东西。

今天出现问题的地方是使用CSS3写手风琴效果的时候出现的。

出现错误:

出现这个错误时,一直搞不懂问题出现在哪里,因为自己设置了ul:hover,所以一旦鼠标出现在ul当中,所有的li就会缩小。而这里如果ul有高度的话,就会出现上图的情况,图中文字部分因为ul有高度,所以也会把所有的li缩小。所以这里就要使用ul崩溃的作用了,一旦ul没有高度,那么其就没有空白的部分了。而因为li还属于ul的一部分,所以还是会变化的。但是自己粗心地使用了overflow,使得浮动闭合了,这就导致了ul有高度。后来在当中了解到了清除浮动的原理,才知道自己错在哪里。这里很巧妙地使用了ul的高度崩溃,可见,这种并不一定是个bug,有时候反而可以利用这种短处来实现我们的目的。其实有时候技术并不是真正的局限,而思维才是真正的局限。另外,不要怕犯错,因为每一次错误都是你重新学习的机会。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • css清除浮动 - lms_码农

    css清除浮动 - lms_码农

    2017-04-05 13:01

  • 一个由进程内存布局异常引起的问题 - twoon

    一个由进程内存布局异常引起的问题 - twoon

    2017-02-08 17:00

  • CSS清除浮动 - 段竹君

    CSS清除浮动 - 段竹君

    2017-01-18 11:00

  • CSS Float 以及相关布局模式 - 刘江龙

    CSS Float 以及相关布局模式 - 刘江龙

    2016-11-03 10:00

网友点评
"