div浮动中的常见的小问题（非全面）

   在div+css定位中浮动使用是非常广泛的，浮动定位给我们带来了美好的视觉效果的同时也给我们带来了相应的麻烦。一般情况下块级元素在标准文档流中独占一行空间，当我们使用浮动时，它就会会脱离标准文档流并且不会占标准文档流的空间，着就导致了浮动后的块级元素会影响其他元素，子级浮动会导致父级元素的高度塌陷。当出现这样的问题时，往往表现的是与其他元素重合、父级元素height为0等常见问题，出现此类问题时我们如何解决呢？

1、于其他元素重合是因为同级元素一个未浮动，一个浮动，因此浮动的元素就会遮住未浮动的元素，解决方法也很简单，将两个元素都设置浮动就可以解决问题。

2、当父级元素height为0时，是因为父级元素未设置高度，其高度由子级元素撑开，当子级元素浮动时，脱离标准文档流，父级元素高度塌陷，出现此问题时可以使父级元素找回高度：overflow:hidden;。

3、当我们将一个固定宽高的div分成多个小的div时，我们通常会给小的div设置边框或背景颜色来便于区分，有可能会出现子级div的位置脱离了父级div的范围，但是却都是设置了浮动的，一般出现这种情况是因为我们在计算子级div宽度或高度时忽略了border的宽度，解决方法可以改子级或父级div的宽高或者将边框设置为outline。

转载于:https://www.cnblogs.com/bycbk/p/7441559.html