web浮动塌陷的原因和简单解决方案

最新推荐文章于 2024-08-22 17:01:19 发布

jontyy

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量1.6k

点赞数 1

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/YJD19970908/article/details/81144056

版权

CSS/CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

web浮动塌陷的原因和简单解决方案

Introduce

因为学校的学弟学妹们偶尔会问问float的问题，每次都说百度去，好像也不太好。就。。整理下把。也给未来什么时候犯傻的自己做一份准备

about

作图是不可能的，这辈子都不可能作图的。我都懒死了

Tool

vscode
chrome
百度

Phenomenon

我还记得我第一次遇到这个问题的时候是这个样子。一个底层div 背景原谅色里面塞了一个ul标签。ul标签里是若干个li标签。大概七八个把。竖着的，就觉得很丑。于是floa：left；还加了个margin。美滋滋的想，哇好漂亮啊，突然发现。哎，背景呢？边框呢？一首凉凉送给自己。审查元素查一查，发现父级div标签的高度变成了0 . border重合。背景消失

Reasons

简单的说说原因把

float有个特性，叫做脱离文本流，文本流的意思就是按照一个人正常书写的方式自左向右，自上而下的写dom节点。脱离文本流的最直观表现就是，在它本身出现的地方，biu消失了，或者到别的地方了。而它原来所在的位置可以被别的dom节点所占有了
所以当元素float之后，就不存在文本流了。那他父级div就懵逼了。哎，我儿子呢？我儿子多大我就得多大啊。他不在文本流了，那就不占大小了啊。那我。。。也变成0吧。嗯，于是父级元素高度归0，宽度归它父级元素的100%。这就是浮动的塌陷了。
可是我一般不能让浮动塌陷啊，塌陷了我的背景怎么办，border怎么办。。我那可爱的学弟告诉我，那我不要背景了，不要border了。。咳咳咳，你怕是想被你的产品打死或者被ui骂死
学弟被我训了一顿，有点傻，又提出来一个意见，那我在子级div设置背景？嘿嘿嘿我没告诉他我以前也这样干过。但是会出现一个问题。你后来出现的dom节点的布局还是有问题。
于是刚学会审查元素的学弟又想出来一招。我给父级加上高度。哈哈哈，这样是不是就完美解决了。嗯我以前也干过。直到有一天发现不兼容浏览器。。移动端和pc端看到了就不同。。可能很细微，但是你的产品不会管的。。。

Solution

我工作的地方离我最近的墙上贴着一面板子，办法总比困难多，实在不行百度啊。啊？懒得百度？那我帮你整理吧

最傻最二的方法，初学者可以在审查元素里查出这一块标签实际的大小，然后赋给父级元素高度和宽度，好的，解决。但是极度不可靠。工作的时候这样子肯定凉凉。
第二傻的方法，给父级元素也加上浮动，那么爸爸儿子就一起动起来了，动次打次，一起浮动，好的解决了父级塌陷的问题。但是，你父级元素的定位不会出问题吗？排版不会出问题吗? 总不能一个网页从头到尾浮动吧。好的，又凉凉了
添加一个div，给它加上style= “clear：both”；我以前用过，后来放弃了，因为每次反复的写div真烦，而且是空白的毫无意义的节点。这对依赖dom操作的原生js和jq 有点不太友好。
伪类，在浮动元素之后加一个伪类标签，比如
```
<div class="box">
   <div class="son">我是浮动的子元素</div>
</div>

.box {
   width:400px;
   background:#F00;
}
.son {
   float:left;
}
.son::after {
   content:"";
   clear:both;/*清除浮动*/
   display:block;/*确保该元素是一个块级元素*/
height:0;
width:0;
visibility :hidden;
}
```
我觉得这是最棒的解决方法，目前来说。你可能觉得这样写css太累了，没关系啊。以后有sass可以用，贼简单，容易上手。
1. overflow：hidden
  - 隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
  - 清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。