浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。下面就从一开接触前端时，渐渐发现解决高度塌陷的问题的方式。

一、给浮动元素的父级元素添加固定的高度css【height:200px】

　　   很多时候就是不想把如下布局中的父极元素的高度定死，讲究的是自适应，从而才出现了高度塌陷的问题，因此，该方法一般都不适用。

二、给浮动元素的父级元素添加样式css【overflow:hidden/overflow:auto】---- 是将父级元素形成一个BFC区（独立的布局环境，BFC中的元素的布局是不受外界的影响）

　　  给如下情况的父级元素添加overflow:hidden/overflow:auto的样式一般情况下很适用，但由于overflow是一种样式的属性，（规定当内容溢出元素框时发生的事情），所以使用该样式虽然可以解决高度塌陷的问题，但是有时候可能会影响元素的样式，所以不要作为主要清理浮动方式。

三、给浮动元素的父级元素添加样式css【float:left】---- 是将父级元素形成一个BFC区（该方式要在不影响其外部的布局的前提上使用）

　　   给如下情况的父级元素添加float:left的样式不建议使用，该方法可能影响到将父级元素外部的布局。　

四、在浮动元素后（父级元素中）添加一个带有clear:both属性的任意空元素，【<div style='clear:both'></div>】（可以是div，也可以是span等标签）

　　   如下清楚浮动的方式一般情况下都是可行的，容易理解，而且兼容所有浏览器、随用随清，需要添加大量无语义的html元素，是不建议使用的。

五、同第四种方式差不多，在如下情况下的父级元素中，浮动元素后（父级元素中）有一个需要的元素且不浮动，给该元素添加样式css【clear:both】

　　 该方式和上面的方式差不多，该方式实在有需要的标签上写上需要的样式，不需要无用的空标签，但该方式在布局中也很少会存在。有存在这种情况的时候可以使用，浮动元素和不浮动元素必须要在同一个父级元素中。

六、给浮动元素的父级元素添加样式css【:after】的伪元素（主要样式如下）----- 所谓的万能清楚法 

　　   给如下父级元素添加一个after伪元素，首先给父级元素加一个类名clearfix，然后书写样式

　　 .clearfix:after{
　　　　content: '.';  -----  可以是看不见的空格“/20”或点“.” 
　　　　display: block;
　　　　height: 0;
　　　　clear: both; ----- 清除浮动
　　 }

　　 .clearfix{

　　　　zoom:1; -----  为了IE6和IE7浏览器

　　 }

　　 这类方式叫万能清楚法，只要能给元素添加class类名即可，不会有无用的空标签，也不会修改父级元素的样式，推荐使用。

 

　　  以上是我参考其他博客并结合我自身理解去总结的，有错的地方希望可以指点。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有