解决HTML页面元素浮动之后最近元素高度塌陷的问题

小咪咪 2023-02-17 11:11 9阅读 0赞

**浮动之后会有问题**：最近的父元素会高度塌陷，前提是所有的子元素浮动，且父元素没有设置高度  
**解决方法**：8种

1、给父元素添加固定高度，适合高度固定的布局

2、给父元素添加overflow：hidden；zoom:1;(针对IE6的兼容，可以不写)  
**缺点**:会对溢出的内容隐藏裁剪，不显示。

3、给所有浮动元素的最后添加一个空的标签 ，并且添加声明clear：both；height：0； overflow:hidden;(添加height：0；和overflow：hidden；是为了避免这个空标签如果是li的话，在IE6和IE7上有默认高度撑着，所以要解决一下。)  
**缺点**:就是造成代码的冗余。

4、万能清除法（更适合整站开发）  
给塌陷的元素加  
: /::after\{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;\}

**如** : ul塌陷，ul：content：”位置”…（引号中可以书写内容，便于显示调试）  
原理：相当于在浮动的元素后面加了一个行内标签，然后display:block转块标签竖着排列，撑开该元素；clear:both清除浮动，则与目标元素不层叠；  
height：0;overflow:hidden考虑IE6、IE7等低版本浏览器兼容问题；  
visibility: hidden;是为了隐藏content里面的内容  
单冒号:after对于IE8以下有兼容问题，所以给塌陷的元素\{zoom：1；\}

**高度塌陷的其他解决方法**（可做了解）

1、父元素也浮动（只能解决一个问题，同时也引发了其他的浮动问题，没有任何优点）

2、给父元素display:table;（转成表格元素，会有新的问题，表格边框…）

3、可以给父元素添加overflow：auto/scroll;(容易产生滚动条)

4、 结尾处加 br标签 clear:both

**补充1**： zoom 可以实现缩放效果 默认值是1 比1大是放大，比1小是缩小，但是仅仅是视觉放大或者缩小，实际并没有变。如果网站开发里面需要涉及到缩放了，不要用zoom；因为zoom只是视觉放大或者缩小。我们只是用来解决IE7或者IE6以下的兼容问题，其他情况下用不到。

**补充2**：万能清除法，在使用的时候，会创建一个公共的类，然后谁塌陷去调用这个公共的类，类似之前的版心公用。<div class=”main clearall”>