详述css样式属性float

HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
        <span >郑州</span>
		<span >大学</span>
		<br />
		<span style="float: left;">郑州</span>
		<span style="float: left;">大学</span>
		<div style="clear: left;"></div>
	</body>
</html>

执行结果：
详述css样式属性float
float设置元素浮动方向，该属性有多个值：

值	描述
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
right	元素向右浮动
left	元素向左浮动


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>none</title>
		<style type="text/css">
			.out{
				width:400px;
				border: 1px solid #00ee00;
			}
			.out:after{
				clear: left;
				content: "";
				display: block;
			}
			.in{
				width: 100px;
				height: 100px;
			}
			p{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<p class="in" style="background-color: red;float: none;"></p>
        	<p class="in" style="background-color: green;float: left;"></p>
        	<p class="in" style="background-color: yellow;float: right;"></p>
    	</div>
    	<br/>
    	
	</body>
</html>

执行结果：
详述css样式属性float