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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chris_z_0622/article/details/65442975

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

  • 我们经常会遇到一种情况,给一个元素设置浮动之后 float:left/right;,如果该元素的父元素有背景颜色,那么会发现父元素的背景颜色消失了;如果父元素有一个边框,那么浮动元素无法将边框撑开。
    元素设置浮动前,父元素的背景色为“渐变灰色”

给li元素添加浮动后,背景颜色消失

  • 从以上两张图中可以看出添加浮动元素后,li元素按照规则横向排列,但是父元素却消失不见了。

    这里写图片描述
    这里写图片描述

  • 为父元素添加一个5px的边框,在li元素添加浮动后,边框并没有被内容撑开。

在第一个示例中仿佛父元素消失了,但在第二个示例中发现其实父元素并没有消失,只是高度被计算为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元素
<div class="box">
    <div class="son">我是浮动的子元素</div>
</div>
.box {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}

没有更多推荐了,返回首页