CSS页面布局基础3——元素浮动

浏览数：41 / 时间：2015年06月09日

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一，可以用它来创建多累的网页布局，从无序列表创建导航工具条，不是用table而创建类似表格的对其方式等。
为使元素浮动到左边或者右边，并使后面的文本环绕它，可使用float属性，float属性的取值是：none(不浮动)，left(向左浮动)，right(向右浮动)。
使用float属性后，浮动的元素从正常文档流中脱离出来，同时对布局中的其他元素造成一定的影响。
浮动可以应用于任何元素。

我个人认为我们可以这样理解浮动(如有什么不对的，欢迎指正)，在平常我们用到块级元素的时候，如果我们将两个块级元素嵌套在一个div中，在正常情况下，这两个块级元素会从上到下一次排列，即一个在上，一个在下，如果我们希望做到将这两个块级元素排列在一排(在这两个块级元素的宽度相加没有超过它们的父元素的宽度的情况下)，我们可以用float属性对其进行设定。例子如下

<!DOCTYPE html>
<html>
<head>
	<title>浮动</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.all{
		width: 250px;
		height: 250px;
		background-color: #faa;
	}
	.div1{
		width: 100px;
		height: 100px;
		background-color: #7BBD53;
		margin-left: 10px;
		/*添加浮动*/
		float: left;
	}
	.div2{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin-left: 10px;
		/*添加浮动*/
		float: left;
		/*必须两处都添加浮动才能达到效果。*/
	}
	</style>
</head>
<body>
	<div class="all">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html>

在没有添加浮动之前

添加向左浮动：

right的应用和left没有什么不同，主要是一个靠左，一个靠右。

上述例子向右浮动的效果：

文本环绕的效果：

<!DOCTYPE html>
<html>
<head>
	<title>围绕文本</title>
	<meta charset="utf-8" />
	<style type="text/css">
	span.text{
		width: 100px;
		margin:20px;
		background-color: #eea;
		font-weight: bold;
		float: right;
	}
	p{
		width: 300px;
		border: solid;
		border-width: 2px;
		border-color: #999;
		padding:30px;
	}
	</style>
</head>
<body>
	<p>
		<span class="text"> 华胥引华胥引华胥引</span>
		<span>这是一个发生在乱世的故事。城破之日，卫国公主叶蓁以身殉国，依靠鲛珠死而复生。当她弹起华胥调，便生死人肉白骨，探入梦境与回忆。幻术构成的曲谱里，尽是人生的辛酸与苦涩。而她与亡她国家的陈国世子，在一次幻境中相遇，身份两重，缘也两重。</span>
	</p>
</body>
</html>

效果：

2、浮动的几个基本行为：(1)当float不等于none引起元素浮动时，元素被视作块级元素(block-level)，等同于设定display:block;
(2)当浮动一个文本类型元素时，必须制定该元素的width属性，如果不设置宽度，元素内容就会折叠到最可能的最小宽度。
(3)浮动元素停留在包含它的父级元素的内容区域内，不会穿过padding区域。
(4)浮动元素的margin元素不会重合。
(5)在源文档中，相邻的浮动元素不允许重叠。
(6)如果元素向同一方向浮动，每个后续的浮动元素必须向该方向移动，直到碰到父级元素的内边缘或者碰到前面的浮动元素。(这会导致多个浮动元素集聚在目标边缘)
(7)如果没有足够的空间让浮动元素肩并肩出现，第二个浮动元素将向下移动，直到有足够的空间来显示它而不覆盖第一个浮动元素。
3、限制浮动元素的顶部边缘的高度的规则：
(1)浮动元素的顶部必须停留在它的父级元素的顶部内边缘之内。
(2)不被块级元素包含的浮动元素的顶部不能比前面的块级元素高。
(3)浮动元素的顶部不能比同在文档源中的前一个浮动元素高。

4、清除浮动:clear(只能用于块级元素)。在某些情况下，我们想浮动元素某一个边的区域被清除，后续的元素从容器的正常位置开始显示，这时候我们可以使用clear属性阻止一个元素出现在浮动元素的后面。

<!DOCTYPE html>
<html>
<head>
	<title>clear属性</title>
	<meta charset="utf-8" />
	<style type="text/css">
	img{
		float:left;
		margin-right: 10px;
	}
	h1{
		clear:left;
		top-margin:2em;
	}
	</style>
</head>
<body>
	<div style="width:300px;height:600px;">
		<p>
		<img src="tu.png">浮动是基于CSS的现代web设计用到的主要功能之一，它可以用来创建多列的网页布局、导航工具条等。
	</p>
	<h1>clear属性清除浮动元素</h1>
	<p>使用clear属性组织一个元素出现在元素的后面</p>
	</div>	
	
</body>
</html>

使用clear清除浮动的影响之前：