html中使用float属性,父元素高度会变为0,怎么解决?

父元素中的所有子元素如果设置float属性,那么父元素的高度会坍缩为0,这个问题怎么解决?目前知道的方法是设置父元素也浮动,或者设一个空的子div,然后style"clear:both",或者设置父元素的高度,但是这些都感觉有一些局限性,还有一个方法是父元素设置overflow:hidden;请问各位为什么这个方法可以解决问题,多余的内容隐藏跟父元素高度显示有什么关系吗?另外还有其他的方法吗?

阅读 5.5k
评论 2016-07-13 提问
    10 个回答

    这里有两篇文章你可以看看,一篇是讲overflow:hidden包裹性来清除浮动,一篇是关于BFC的。
    http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
    根据张鑫旭老师的说法,就是overflow:hidden和position:absolute会有包裹性,这样就会包裹着浮动的元素,就是清除浮动了,当然我没有试过absolute能不能清除浮动。

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
    还有就是BFC里面有两条规则:
    1、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    2、计算BFC的高度时,浮动元素也参与计算
    overflow:hidden会产生BFC,所以内部的子元素不会影响到父元素,所以高度不会塌陷。

    评论 赞赏 2016-07-14

      一个有四个方法可以解决:

      方案一

      在浮动元素下面加一个清除浮动的元素:div{clear:both}

      html

      <div class="clearfix">
          <div style="float: left;">Div 1</div>
          <div style="float: left;">Div 2</div>
      </div

      css

      .clearfix:after { 
         content: " ";
         display: block; 
         height: 0; 
         clear: both;
      }

      方案二

      将父元素也设置为浮动的

      html

      <div style="float: left;">
          <div style="float: left;">Div 1</div>
          <div style="float: left;">Div 2</div>
      </div>

      方案三

      为父元素显式的设置高度,不推荐

      html

      <div style="height: 400px;">
          <div style="float: left;">Div 1</div>
          <div style="float: left;">Div 2</div>        
      </div>

      方案四

      为父元素加入overflow:hidded属性或者overflow:auto属性

      html

      <div style="overflow: hidden;">
          <div style="float: left;">Div 1</div>
          <div style="float: left;">Div 2</div>        
      </div>

      上面四种方案,方案一比较靠谱,兼容性最强

      评论 赞赏 2016-07-14
        小胖
        • 1.1k

        大家说得都是对的, 我来补充一下, 基本所有css框架都有一个类叫clearfix, 只需要在这个float的div上加上这个类名就可以了。

        评论 赞赏 2016-07-14

          伪元素设置{content:"";display:table;}
          空div设置 {clear:both}
          和父元素: {overflow:auto}
          我只知道这几个。

          至于你的overflow:hidden; 是你写错了啊?

          评论 赞赏 2016-07-13

            overflow hidden是超出的内容隐藏掉
            我常用的就是你说的clear both 没什么问题啊
            或者你高兴的话 直接把父节点也float起来 也能解决 但是不建议这么做 这样会导致全部元素都浮动了 容易出更多问题

            评论 赞赏 2016-07-13

              只知道三种。好像没什么原因吧。记住就好

              评论 赞赏 2016-07-14

                还是clearfix大法最好

                评论 赞赏 2016-07-14
                  ipland
                  • 111

                  Clear Float总结得不错,应该能解答你的疑惑。

                  评论 赞赏 2016-07-14

                    .clearfix:after{ clear:both; display:block; content:"";}
                    .clearfix{ zoom:1;}

                    在css里面加上这两行代码,给浮动元素的父级加上clearfix这个class就行了(元素加浮动,父级清除浮动)

                    评论 赞赏 2016-07-14

                      方法网上都有可以自己慢慢试真的!还是自己通过尝试来看区别比较直观!比如用给父元素加高度的方法,再去试试给浮动元素用margin是否和正常文档流一样!反正个人觉得还是给父元素加after伪类比较顺!

                      评论 赞赏 2016-07-14
                        撰写回答

                        登录后参与交流、获取后续更新提醒