div元素自动换行撑开_元素坍塌的6种解决办法

好&＃xff0c;咱们废话不多说&＃xff0c;直接干货&＃xff1a;

首先&＃xff0c;什么是元素坍塌?很简单&＃xff0c;一句话讲完&＃xff1a;就是内部元素设置了浮动&＃xff08;float&＃xff09;导致外部父元素无法被撑开,从而就坍塌了。

不理解&＃xff1f;直接上代码&＃xff1a;

如图就是这个效果&＃xff1a;wai没有设置固定宽高&＃xff0c;nei有固定宽高&＃xff0c;并且有浮动&＃xff0c;nei就浮动到wai上面&＃xff0c;从电脑侧面看&＃xff0c;nei在wai上面&＃xff0c;所以nei无法撑开wai&＃xff0c;wai就塌了&＃xff1b;

怎么解决&＃xff1f;下面我给出6个小技巧希望帮助到大家。

1&＃xff0c;第一种方法&＃xff1a;在父元素wai内部结束位置增加一个空的div&＃xff0c;并清除浮动。

直接上代码&＃xff1a;

如图&＃xff0c;就是这个效果&＃xff08;父元素被撑开&＃xff09;&＃xff1a;

2&＃xff0c;第二种方法&＃xff1a;给父元素&＃xff08;wai&＃xff09;设置overflow:hidden属性来清除浮动。

代码如下&＃xff1a;

如图效果一样;&＃xff08;不过要注意的是如果nei 是margin负值定位或者绝对定位就会被裁剪&＃xff09;

3&＃xff0c;第三种方法&＃xff1a;给wai也设置浮动&＃xff08;float&＃xff09;。

代码如下&＃xff1a;

效果如下图&＃xff1a;&＃xff08;不过此方法值的注意的是&＃xff0c;虽然wai可以被撑开&＃xff0c;但wai失去了自身的宽高&＃xff0c;同时如果wai后面有别的元素&＃xff0c;也会受到影响&＃xff09;

4&＃xff0c;第四种方法&＃xff1a;给wai设置固定高度(需要注意前提是知道nei 的宽高&＃xff0c;wai的height&＃61;nei的height&＃43;2*border)

代码如下&＃xff1a;

效果如下图&＃xff1a;

5&＃xff0c;第五种方法&＃xff1a;给wai设置&＃xff1a;display:inline-block/inline-flex/inline-table都可以实现,缺点是会失去自身的宽高。

代码如下&＃xff1a;

效果如下&＃xff1a;

6,第六种方法&＃xff1a;给外&＃xff08;父元素&＃xff09;添加伪类:before/:after&＃xff0c;来解决。&＃xff08;这种方法常用&＃xff0c;并且不会影响页面布局&＃xff0c;着力推荐&＃xff0c;效果杠杠的&＃xff01;&＃xff09;

代码如下&＃xff1a;

效果如下图&＃xff1a;

这个方法原理上相当于第一种方法(在wai内添加一个空元素div&＃xff0c;但却更加实用&＃xff0c;更加强大)

以上的几个小技巧都是自己一点经验&＃xff0c;希望可以帮助到大家&＃xff0c;欢迎大家批评指正。么么哒~