高度坍塌的几种解决方法

一什么是高度塌陷
当父元素没有设置高度时，此父元素里面的子元素又添加了浮动属性，此时会出现高度塌陷。
二高度塌陷的原理
出现高度塌陷的元素中，它的子元素添加了浮动，因为浮动不占据空间，脱离了文档流，这时候父元素又没有设置高度，此时父元素的高度没有被撑开，就是我们常说的元素“高度坍塌”问题。
三高度坍塌解决方法
方法一：
1.给出现高度坍塌的元素添加overflow：hidden属性。
2.原理：overflow：hidden可以触发bfc，bfc规定：在计算bfc高度时，bfc里面的浮动元素也参加高度的计算。
3.代码实现
（1）html

（2）css
方法二：
1.在浮动元素的下面添加一个空的元素，并且给这个元素设置clear：both；
2.原理：
a.首先，我们需要了解浮动原理是：当给一个元素添加浮动时，该元素会在同一行内预留空间给下一个元素，也就实现了块状元素可以同在一行内排列的问题。
b.清除了浮动的原理后，再来说说clear：both，clear：both指的是清除元素的左右浮动，即忽略掉上面的浮动元素给它预留的空间，因为忽略掉了预留的空间，新添加的空元素不会在浮动元素预留的空间中占位，它会在下一行占空间，从而把父元素的高度给撑开了，也就解决了高度坍塌问题。
3.代码实现
(1)html

(2)css

方法三：
万能清除法(常用的方法)
1.语法格式如下
高度坍塌的元素：after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
2.代码实现
（1）html

（2）css

高度坍塌的几种解决方法相关推荐

php取数组中连续数,PHP实现求连续子数组最大和问题2种解决方法
本文实例讲述了PHP实现求连续子数组最大和问题2种解决方法.分享给大家供大家参考,具体如下: 问题描述求子数组的最大和题目描述: 输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整 ...
mysql workbench kernelbase.dll_电脑出现kernelbase.dll错误的两种解决方法
KernelBase.dll是Windows操作系统的重要文件,它为各种应用程序提供服务.如果电脑提示kernelbase.dll错误,这该怎么处理?大家可以用电脑自带的防火墙或者是第三方软件来进行故 ...
SVN被锁定的几种解决方法
SVN被锁定的几种解决方法参考文章: (1)SVN被锁定的几种解决方法 (2)https://www.cnblogs.com/smiler/p/4567116.html 备忘一下.
IOS - No provisioning profiles with a valid signing identity 一种解决方法
IOS - No provisioning profiles with a valid signing identity 一种解决方法参考文章: (1)IOS - No provisioning ...
关于盒子塌陷的几种解决方法
关于盒子塌陷的几种解决方法参考文章: (1)关于盒子塌陷的几种解决方法 (2)https://www.cnblogs.com/xiaozhu-zhu/p/11946896.html (3)https ...
[Bat]UNC路径不支持的2种解决方法
[Bat]UNC路径不支持的2种解决方法参考文章: (1)[Bat]UNC路径不支持的2种解决方法 (2)https://www.cnblogs.com/masonlu/p/10276546.htm ...
Json返回时间中出现乱码问题的两种解决方法
Json返回时间中出现乱码问题的两种解决方法参考文章: (1)Json返回时间中出现乱码问题的两种解决方法 (2)https://www.cnblogs.com/hanyinglong/archiv ...
windows 10 安装openssh 0x800f0954 的一种解决方法
windows 10 安装openssh 0x800f0954 的一种解决方法参考文章: (1)windows 10 安装openssh 0x800f0954 的一种解决方法 (2)https:// ...
429 too many requests错误出现在wordpress后台更新及官网的5种解决方法
429 too many requests错误出现在wordpress后台更新及官网的5种解决方法参考文章: (1)429 too many requests错误出现在wordpress后台更新及官 ...
css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.

高度坍塌的几种解决方法

高度坍塌的几种解决方法相关推荐

最新文章

热门文章