CSS属性float详解

CSS属性float详解

在html页面布局中，块元素无论宽度有没有占满整个浏览器，都是默认竖直向下依次排列的。这时候需要块元素水平排列怎么办呢？这就需要用float解决问题了。
浮动前：

				float: left;/* 元素左浮动，从左到右依次排列 */
				float: right;/* 元素右浮动，从右向左依次排列 */
				float: none; /* 默认值，不浮动 */
				float: inherit;/* 规定从父元素继承浮动属性 */

左浮动后：


右浮动后：


可以看到右浮动略有不同，会从右往左按顺序排列。

无论是块元素，行内元素，还是行内块元素，都可以使用浮动实现水平排列。排满一行自动换下一行继续排列。

注意点：

1.浮动会使元素脱离文档，不占页面空间，导致下面的元素挤上去，文字会环绕显示；

2.如果父元素不设宽高，会造成父元素高度塌陷；

可以很明显的看出，父元素瘪了，这就是高度塌陷。

3.如果不设置宽度，浮动后宽度会收缩；

默认情况下不设置宽度块元素宽度是铺满整个浏览器窗口的，但是浮动后宽度会收缩


没有设置宽度的被内容撑开，没有内容的宽度也没有了。

4.浮动之后margin 0 auto;失效

脱离文档后margin 0 auto ；失效。