css浮动规则

css浮动

在说明浮动规则之前，先讲一下为什么需要浮动吧。
HTML中的标签可分为块状元素和行内元素。块状元素在页面显示中独占一行，可以定义宽高，就像这样：

但行内元素可以并排显示，

那么如果想要实现块状元素像内联元素一样可以并排显示的话，就需要给元素设置浮动属性。
浮动可以取消标准流模式，让块状元素可以并排显示。

浮动在css中的写法：
选择器{float：属性值；}

浮动的属性值
left：向左浮动；
right：向右浮动；
none：取消浮动；
inherit：继承父级元素的浮动属性；

添加浮动后的效果

浮动属性的规则

规则一：浮动元素的左右外边界不能超出包含块的左右内边界。
规则二：浮动元素不会重叠。
规则三：浮动的顺序和HTML中标签书写的顺序有关。
规则四：元素添加浮动后，不再占有标准文档流的位置，后面的元素会向上移动补位。如图：

规则五：如果多个元素需要并排显示，那么这些元素都需要设置浮动，否则会出现下面这种状况，如图：

1没有设置浮动，2设置向右浮动，可见浮动后没有在一排显示。

规则六：浮动对象会向左或向右浮动直到遇到边界，padding，margin，border或另一个元素位置。
规则七:容器宽度不够时，添加浮动的元素会转到下一行，如图：

规则八：添加浮动属性后，margin：0 auto；就不再起作用。

附：

利用float属性可以做一个简单的导航：

<style type="text/css">
			li{list-style: none;}
			a{text-decoration: none;}
			.nav {
				width: 1080px;
			}
			.nav li{
				width: 137px;
				height: 50px;
				float: left;
				font-size: 16px;
				line-height:52px ;
				text-align: center;
				background: #6ba9ef;
			}
			.nav li a{
				color: #134680;
		</style>

效果图：