css浮动(float)、高度塌陷问题

本文主要是介绍css浮动(float)、高度塌陷问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

块级元素在文档流无法在同一行显示多个元素，而将其转化为行内元素或者行内块元素后元素之间又会出现缝隙。为达到布局效果就要使用到浮动（float）。浮动框可以向左或者向右移动，直到它边缘碰到父盒子的边框或者另一个浮动的元素的边框为止。浮动会使元素脱离文档流（标准流），即在文档流中不再占有位置。

如图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以不占据空间，实际上盖住了框 2，使框 2 从视图中消失。

如图，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间。如果浮动元素的高度不够，那么当他们向下移动时可能被其他元素“卡住”。

元素浮动时，它上下移动直到上边缘碰到前面元素（浮动元素或标准流元素）的下边缘为止，或者与前一个浮动元素的上边缘对齐；左右移动直到碰到其他元素的边缘或者包含元素的边缘为止。如图所示。

兄弟元素没有同时设置浮动常会出现的问题有:

后面的元素被前面的浮动元素覆盖。
后面的浮动元素由于前面的兄弟元素没有浮动而没法显示在同一行。

由于父级元素在很多情况下不会直接给定高度（高度由内容撑开），里面的子元素脱离文档流后,不再占据空间。父元素内容的高度出现变化（塌陷），影响父元素下面文档流盒子的位置。

解决高度塌陷问题即清除浮动的本质是清除浮动元素对父元素高度的影响。如果父元素盒子本身有高度，则不需要清除浮动。方法是给父元素里面的子元素添加 clear 属性。

/*清除该元素左边浮动元素对父元素的高度的影响*/
/*可以设定的值还有right、both*/
selector {clear:left;
}

通常解决高度塌陷问题采用的策略是闭合浮动，即将浮动产生的影响只局限于父元素内部。

<!--添加了无意义的标签，结构性较差。-->
<div style="clear:both"></ div>

.clearfix:after {content:"";display:block;clear:both;height:0;visibility:hidden;
}
.clearfix {   /*ie6、ie7专用*/
*zoom:1;
}

.clearfix:before,.clearfix:after {content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {   /*ie6、ie7专用*/
*zoom:1;
}

注意：清除浮动解决的是父元素的高度塌陷对其下面元素的影响而不是解决里面的浮动元素对父元素里面的子元素（位于浮动元素后面的元素）的影响。平时应该注意这两种影响的区别。

这篇关于css浮动(float)、高度塌陷问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！