快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

HTML中浮动元素float使其父元素高度塌陷的示例分析

这篇文章主要介绍HTML中浮动元素float使其父元素高度塌陷的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

定州网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联建站2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

浮动元素使其父元素高度塌陷我们经常会遇到一种情况,给一个元素设置浮动之后 float:left/right;,如果该元素的父元素有背景颜色,那么会发现父元素的背景颜色消失了;如果父元素有一个边框,那么浮动元素无法将边框撑开。

HTML中浮动元素float使其父元素高度塌陷的示例分析

HTML中浮动元素float使其父元素高度塌陷的示例分析

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

HTML中浮动元素float使其父元素高度塌陷的示例分析 

HTML中浮动元素float使其父元素高度塌陷的示例分析

为父元素添加一个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元素


    我是浮动的子元素
.box {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

以上是“HTML中浮动元素float使其父元素高度塌陷的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


名称栏目:HTML中浮动元素float使其父元素高度塌陷的示例分析
链接URL:http://6mz.cn/article/ppooij.html

其他资讯