【css】div父元素根据子元素高度自适应高度

末蓝、 2022-08-21 07:59 366阅读 0赞

两种情况(无特殊说明子元素都是指代父元素的第一级子元素)

  1. 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题.
  2. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！

解决这个问题的根源就是清除浮动：

  1. 1 , 给父节点增加样式overflow:hidden或者overflow:auto 
  2. 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div或者br
  4. <div style="clear:both"></div>
  5. <!--或者-->
  6. <br clear="all" />

贴士

发现一个更好的一种方式，就是使用伪元素来达到这种效果，在父元素上增加一个:after伪元素,像这样

  1. div::after { clear: both }

我看medium上面的一篇文章，是这样来清除浮动的。from now on , I will take this

  1. .container::before, .container::after { content:""; display:table; }
  2. .container::after { clear:both; }

点击这个链接：display值为table 和 block的区别。

参考资料:

overflow清除浮动

关于clearfix

发表评论

表情：
评论列表 （有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读