解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法

dabai 发布于2019-04-23 11:54 / 1605人阅读

摘要：今天在写网页时遇到如下图问题，解决问题后自己做个随笔，希望帮到更多的学前端的童鞋问题图片问题描述最外层的父级元素不能自适应高度不能随对象撑开没有高度当在对象内的盒子使用了后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。

问题

父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法。

今天在写网页时遇到如下图问题，解决问题后自己做个随笔，希望帮到更多的学前端的童鞋！

问题图片

问题描述

最外层的父级元素不能自适应高度-不能随对象撑开没有高度

当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。

解决方法

一、

在父元素里最底部加上一个clear清除浮动的标签(无需内容)，并设置clear: both;

HTML

CSS

页面效果

二、

直接给父元素加上伪对象选择符(::after),意思就是在父元素后面添加清除浮动属性。

HTML

CSS

页面效果

简单解决了问题，如有不足之处，请多多指教！

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

混合云私有云父级元素获取父级元素的解决办法微软的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1329.html

关于css兼容性问题及一些常见问题汇总

摘要：解决办法添加复制内容到剪贴板一行右侧第一个元素有双边距一行左侧第一个元素有双边距在，下，自身没浮动，但是的内容有浮动，下边就会产生一个间隙解决办法给加浮动给加注意当下最小高度问题，和的间隙问题共存的时候，给加浮动才能解决。目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。 1.圆盘时钟有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下...

seanlook 2019-04-23 11:43 评论0 收藏0
浮动高度塌陷问题 BFC

摘要：容易混淆的是，效果几乎一样，但是并没有脱离文档流，并且元素中间有空隙。讲高度塌陷问题在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。 58-59讲浮动三个块级div水平方向排列：不脱离文档流 display：inline-block可以把它们三个变为行内块元素,但是书写方式必须是这也每个div必须紧邻，中间不能留有空隙下面这...

paraller 2019-08-29 18:33 评论0 收藏0
浮动高度塌陷问题 BFC

摘要：容易混淆的是，效果几乎一样，但是并没有脱离文档流，并且元素中间有空隙。讲高度塌陷问题在文档流中，默认父元素不设置高度是被子元素撑开，当子元素脱离了文档流，父元素会出现高度塌陷的问题。 58-59讲浮动三个块级div水平方向排列：不脱离文档流 display：inline-block可以把它们三个变为行内块元素,但是书写方式必须是这也每个div必须紧邻，中间不能留有空隙下面这...

_Suqin 2019-08-02 16:12 评论0 收藏0
网页兼容性

摘要：块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。浮动定位和清除浮动时只会应用于同一个内的元素。外边距折叠也只会发生在属于同一的块级元素之间。记录IE67下常见的问题 1、H5标签兼容 H5的新加入的标签在IE67下无用解决办法：检测是否有这个标签，如没有则自己定义一个标签，但要注意自定义标签默认是内联元素，没有宽和高...

Donne 2019-08-30 15:56 评论0 收藏0
网页兼容性

摘要：块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。浮动定位和清除浮动时只会应用于同一个内的元素。外边距折叠也只会发生在属于同一的块级元素之间。记录IE67下常见的问题 1、H5标签兼容 H5的新加入的标签在IE67下无用解决办法：检测是否有这个标签，如没有则自己定义一个标签，但要注意自定义标签默认是内联元素，没有宽和高...

blair 2019-08-02 14:24 评论0 收藏0