子元素全部浮动时如何解决父元素无法撑开？

问题描述&＃xff1a;

在我们让元素浮动的时候&＃xff0c;它就会离开原来的文档流&＃xff0c;将它原先占有的空间释放。

打个比方&＃xff0c;父元素就如一个有伸缩性的容器&＃xff0c;而子元素就如一个气球。当没有设置容器的高宽时&＃xff0c;他的高宽完全是被装在里面的气球撑开的&＃xff0c;当子元素浮动时候&＃xff0c;就像气球从容器里飘了出来&＃xff0c;飘在了他的上方。而此时容器也就空了&＃xff0c;由于伸缩性&＃xff0c;高度就变为了o&＃xff0c;看不见了。

而我们想要父元素显示出来&＃xff0c;正常得被子元素撑开&＃xff0c;怎么做呢&＃xff1f;

代码描述&＃xff1a;

 此时效果为&＃xff1a;

此时父元素的黑色就没有显示出来&＃xff0c;因为他的高度变为了0。

解决方案&＃xff1a;

1、父元素添加高度。

#div1{background-color: blank;height&＃xff1a;200px&＃xff1b;}

此方法可以将父元素显示出来。

缺点&＃xff1a;但当你调整子元素高度的时候&＃xff0c;若你要实现父元素包含子元素的效果&＃xff0c;你就也要调整父元素高度。

实在很麻烦&＃xff01;所以此方法不要用&＃xff01;很low&＃xff01;

2、父元素也添加浮动。

#div1{background-color: black;width: 100%;float: left;}

以暴制暴的方法&＃xff01;别人浮起来你也要跟着一起浮。

缺点&＃xff1a;虽然可以解决问题&＃xff0c;但是后面要添加有不需要浮动的子元素&＃xff0c;则影响其显示。

3、给父元素添加overflow&＃xff1a;hidden&＃xff1b;

#div1{background-color: black;overflow: hidden;}

缺点&＃xff1a;一旦包含非浮动的子元素&＃xff0c;则会影响其显示。

4、给父元素添加一个无关的元素&＃xff0c;让添加的无关元素去清除浮动 clean&＃xff1a;both;

#div5{clear:both;}

缺点&＃xff1a;添加了一个无关元素&＃xff0c;代码阅读受影响。

5、通过伪类来实现&＃xff0c;在需要清除浮动的父元素里&＃xff0c;添加一个清除浮动的伪类。

#div1:after{content: "";display: block;clear: both;}

推荐此方法&＃xff01;&＃xff01;&＃xff01;比较高级&＃xff01;&＃xff01;而且没有以上缺点&＃xff01;