WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

浮动布局:高度塌陷及解决办法(最详细解)

更新时间:2021-04-15 14:21 作者:祖国未来的小码农点击:
高度塌陷产生原因:
 
在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失。
 
解决高度塌陷缘由:
 
由于高度塌陷会影响页面中其他元素的布局(父元素塌陷后,其下面的元素将会自动上移),将会导致页面混乱,因此解决高度塌陷是不可逃避的问题。
 
解决办法:
 
1.将父元素高度写死,这样可避免高度塌陷,但这样也会让父元素高度不再被子元素撑开,将会导致各种问题,因此这种方法不推荐。
 
2.开启BFC
BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含属性,可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域,但开启BFC后都会有或多或少的副作用,因此需要挑选一个副作用最小的方法来开启。
 
关于元素开启BFC后变成独立布局区域的个人理解解释:
可以将开启BFC后的元素看成一个譬如html的大容器,此时其中的子元素便相对于父元素定位,此时设置外边距便不会发生重叠问题。
 
元素开启BFC后特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠(关于外边距重叠问题在后续博客会详细解释)
3.开启BFC的元素可以包含浮动的子元素(解决高度塌陷)
 
这三个特点很重要,因此需要牢记并熟练运用
由于BFC是CSS中的隐含属性可以理解为抽象存在的,所以不能对元素直接开启,可以通过一些特殊方式来开启元素的BFC:
1.设置元素的浮动(不推荐,高度塌陷解决,但是宽度跟随消失)
2.将元素设置为行内块元素(不推荐,高度塌陷解决,但是宽度跟随消失)
3.将元素的overflow设置为一个非visible的值
- 常用方式:为元素设置 overflow: hidden 开启其BFC 以使其可以包含浮动元素
当然这三个是常用的开启BFC方式,更多开启BFC的方式可自行查找.
 
下面介绍一个更厉害的方法
 
你可以在塌陷父元素的末尾设置一个伪元素after将内容设为空白,并设置为块元素,同时用clear清除兄弟浮动元素带来的影响,从而将父元素撑起,代码如下:
 
div::after{
content:'';
dispay:block;
clear:both;
}
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容