CSS浮动父级塌陷的解决办法

2024-05-13 18:26:56

高度塌陷

在文档流中，父元素的高度是被子元素撑开

若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷会影响页面布局，这个必须解决

解决方案一：

给父元素设置固定高度但在实际开发过程中，高度都是被内容撑开

解决方案二：

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

当开启了BFC后，元素会变成一个独立的布局区域，会有以下特点
1:父元素的垂直外边距不会和子元素重叠
2:开启BFC的元素不会被浮动元素所覆盖
3:开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）
如何开启BFC
1:设置元素浮动
不推荐，还是会改变页面的布局，而且父元素的宽度会丢失
2:设置元素为inline-block
不推荐，会丢失父元素的宽度
3:将元素的overflow设置为一个非visible的值
可以使用，也会产生一些小的副作用
4:设置元素绝对定位

解决方案三：

由于受到浮动的影响，box3上移，希望清除其他元素浮动对当前元素产生的影响，可以用clear属性来完成

可选值：
none 默认值不清除浮动
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动

clear原理
设置浮动后，浏览器会自动为元素添加一个上外边距，以使位置不受其他元素的影响

解决方案四：
添加一个内容

将内容转成块元素

display: block；

清除两侧的浮动

clear: both;

CSS浮动父级塌陷的解决办法相关推荐

脱离文档流的方法CSS浮动产生的负面影响及解决办法
https://blog.csdn.net/theLostLamb/article/details/79581984 一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素, ...
清除浮动-父级添加overflow（HTML、CSS）
清除浮动-父级添加overflow(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><me ...
html子级透明度不随父级别,我不想从CSS的父级继承子级不透明度
我不想从CSS的父级继承子级的不透明度. 我有一个div是父级,而我在第一个div中有另一个div是孩子. 我想在父div中设置opacity属性,但我不希望子div继承opacity属性. 我怎样才 ...
html如何更改子元素文字颜色,CSS更改父级悬停上的子元素字体颜色
我试图让它如此:当将鼠标悬停在td上时,跨度内部变为白色,并且td的背景变为蓝色.但是,没有一个类似的问题似乎对我有帮助.表例如CSS更改父级悬停上的子元素字体颜色第一行: Account Hold ...
【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）
正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...
html 内容不被父级包住,解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法...
问题父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法. 今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋! 问题图片问题描述最外层的不能自适应高 ...
前端----高度塌陷及解决办法(最详细解)
高度塌陷产生原因: 在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失. 解决高度塌陷缘由: 由于高度塌 ...
web前端数组塌陷的解决办法
我们在处理数组的时候,如果想要删除干净一个数组按照正常的方式肯定是循环遍历,然后一个一个的将其删除掉,但在实际操作中会出现删除不干净的情况,这就是数组塌陷,下面小千介绍几种解决办法,记得收藏哦~ 解决 ...
什么是高度塌陷以及高度塌陷的解决办法
什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ...

最新文章

热门文章