关于浮动元素float使其父元素高度塌陷的原因及解决方法

2024-05-22 07:43:28

浮动元素使其父级元素高度塌陷

在没有设置浮动前（父级元素背景色为黑色）

给两个子元素设置左浮动后，在示例中仿佛父元素消失了，其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）

解决方案：

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
4、给父元素添加 overflow：hidden；
5、通过伪类::after清除浮动

overflow:hidden;

隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

::after 伪类
利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素

此方法清浮动比较常用，切内容基本不变，建议记住，只需把伪元素标签给父级元素即可

关于浮动元素float使其父元素高度塌陷的原因及解决方法相关推荐

MBP(MacBookPro)使用时出现电流声的原因及解决方法
最近使用MacBookPro时发现,本本时不时的传来"滋滋"的电流声,夜深人静的时候听了让人很闹心. 遂谷姐解决方法,根据搜索到的结果,是因为当本本充满电之后,左上角的magesa ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
360安全浏览器右击不显示审查元素或按F12不弹出开发人员工具的原因和解决方法:设为极速模式
360安全浏览器右击不显示审查元素或按F12不弹出开发人员工具的原因和解决方法:设为极速模式参考文章: (1)360安全浏览器右击不显示审查元素或按F12不弹出开发人员工具的原因和解决方法:设为 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
高度塌陷的产生原因及解决方法
什么是高度塌陷? 当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题. 父元素高度塌陷后,父元素以下的元素都会向上移动,导致 ...
html相对于父元素居中,浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
Selenium UI自动化测试中元素定位不到的原因和解决方法汇总
文章目录 1.总览 2.元素定位不到的原因之[页面元素没有及时加载] 3.元素定位不到的原因之[页面元素不可见或不可点击] 4.元素定位不到的原因之[页面元素是动态的] 1.总览原因解决方法没有 ...
行内块元素加了文字会被挤下来的原因及解决方法。
代码: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8&q ...
【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）
正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...

最新文章

热门文章