Float(浮动)

Float(浮动)

什么是Float(浮动)？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），在布局时一样非常有用。但是，float的真正用途不是我们平时用于将同模块下的元素并行显示，也不是为了实现将元素放在某一特殊位置时使用。

它在设计之初本身所服务的真正功能用途：是元素具有包裹性。最直观的体现效果就是我们world里面常用文字环绕图片，图片在一段文字的某一个我们需要的位置。

它虽然可以在我们布局时应用，但却有些我们不能忽视的注意事项，不然在我们的布局中往往会出现一些让我们头痛的问题。比如浮动之后导致父级元素崩塌，找不到在文档流中的位置。这时我们需要回头去理顺代码，降低了工作学习的效率。

造成父级元素崩塌的原因，是因为子元素在浮动之后脱离了原本的文档流，导致父级元素内容为空。默认没有被撑开，从而看起来失去了位置。

解决的办法：

   给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是有一定的弊端，会影响父元素之后的元素排列，甚至影响布局。
   给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
   添加一个块级元素，并给此元素设置clear:both;清除浮动。