5个问题解释css浮动问题

CSS的Floats （浮动元素）使用起来很简单，但一旦使用，它对其周围元素的影响有时会变得不可预测。如果大家曾经遇到过附近元素消失等问题,看了这篇后就可以很快解决了.

这篇文章将解释五个基本问题，将帮助大家理解浮动元素:

哪些元素不浮动？
当元素浮动时会发生什么？
浮动元素的兄弟元素会怎么样？
浮动元素的父元素会怎样？
如何清除浮动？

1. 哪些元素不浮动？

绝对或固定定位的元素不会浮动。因此，下次遇到无法正常工作的浮动时，请检查它是否在position:absolute或者position:fixed中，并重新进行布局处理。

2. 当元素浮动时会发生什么？

当一个元素被标记为“浮动”时，它基本上会向左或向右运行，直到它撞到其容器元素的壁。或者它会一直运行，直到碰到另一个已经撞到同一堵墙的浮动元素。它们将继续并排堆积，直到空间耗尽，而新传入的将被向下移动。

浮动元素不会出现在它之前的元素(在html结构先出现)上方，这也是需要注意的事项。

根据保持浮动的元素类型，浮动元素还会发生以下两件事：

内联元素浮动时会变成块级元素

有没有想过为什么突然能够为span这个浮动的内联元素分配高度和宽度？

这是因为浮动时的所有元素都将display属性设置成block ( inline-table为 table)，从而使它们成为块级元素。

未指定宽度的块元素在浮动时将缩小以适合其内容

通常，当你没有给块元素指定宽度时，它的宽度是默认的100%。但当浮动时，情况就不再是这样了；块元素的框将缩小，直到跟其内的文本同等宽度.

3. 浮动元素的兄弟元素会怎么样？

当在一堆元素中浮动一个元素时，不必担心它的行为，它的行为将是可预测的，并且会向左或向右移动。真正应该考虑的是之后的兄弟元素会如何表现。

文本和内联元素将简单地将浮动元素让路，并将浮动元素包围.

而块级元素则会将float元素包裹住,这样也就是意味着需要会其他一些子元素隐藏掉.

4. 浮动元素的父元素会怎样？

父元素除了会限制浮动元素不超出左右边界外基本不会关心浮动元素.

通常，未指定高度的块元素会增加其高度以容纳其子元素，但浮动子元素的情况并非如此。如果浮动元素的高度增加，其父元素不会相应地增加其高度。

5. 如何清除浮动？

可以在父元素上添加overflow:hidden
在兄弟元素上添加:

clear: left;
clear: right;

清除左或右浮动或者直接使用clear: both;直接清除掉左右的.clear属性可以根据方便用在同级元素、空 div 或伪元素上也行。

总结

绝对/固定元素不会浮动。
浮动元素不会超出代码中之前的元素。
如果容器内没有足够的空间，一个浮动元素就会被推下去。
所有浮动元素都被制作成块级元素。
如果浮动元素上未指定宽度，它将缩小以适合内容。
浮动元素的后续的兄弟元素将围绕它们（内联和文本）或包裹它们（块）。
要阻止元素包围浮动元素，在父元素上设置overflow:hidden.
浮动元素的父冤死不会增加其高度来适应浮动。
要使父元素按照浮动元素增加其高度，可以设置overflow:hidden（或在其后创建一个空的同级元素并设置clear属性）。
为了防止元素靠近任何浮动元素，请使用clear属性。