高度塌陷产生原因:
在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失。
解决高度塌陷缘由:
由于高度塌陷会影响页面中其他元素的布局(父元素塌陷后,其下面的元素将会自动上移),将会导致页面混乱,因此解决高度塌陷是不可逃避的问题。
解决办法:
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;
}
|