解决子元素浮动导致父元素高度塌陷的问题(清除浮动的方法)
备注:浮动会让元素脱离了文档流,使元素的显示更为灵活,但它也是一把双刃剑,同时会带来其他问题。
1. 浮动的元素会覆盖后面处于文档流中的元素
浮动引起遮挡问题.png
解决:只要给box-2(与浮动元素同级的元素)清除浮动就行了
清除浮动.png
2. 浮动元素会导致父元素高度坍塌
(1) 问题描述
浮动的元素会覆盖后面处于文档流中的元素:当子元素A使用浮动属性时,若父元素B有同级元素C,则元素C将被子元素A覆盖。
*/
Left浮动
Right浮动
div2
子元素浮动导致父元素高度塌陷—与父级同级元素被遮挡覆盖.png
(2) 问题分析
基础:对于一个元素来说,不设固定高度时它的高度是由内容撑开的,也就是说,如果这个元素里面没有任何内容,他的高度就是0,当这个元素有内容的时候,它就有了高度,也就是内容的高度。
分析:当子元素A使用浮动属性时,子元素将脱离文档流,不再默认继承父级的宽高,父级也检测不到子级的内容,这会导致父元素的高度为0,即子元素浮动导致父元素高度塌陷。
(3) 解决:解决思路主要是为父级清除浮动从而使父级div能获取到高度。
方案一(父级方法):为父级div添加伪类after,并清除浮动
display:block;
content:"";
clear:both;
即:
Left浮动
Right浮动
div2
解决子元素浮动导致父元素高度塌陷.png
方案二(子级方法):在浮动的子元素尾部添加一个同级的空div标签或(br标签),并清除浮动
clear:both;
即:
Left浮动
Right浮动
/**/
div2
方案三(父级方法):为父级设置高度
Left浮动
Right浮动
发表评论 (审核通过后显示评论):