css 的 float 与clear

http://www.w3school.com.cn/css/css_positioning_floating.asp

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在
一样(接下来的文本流会围绕在这个浮动块周围)。
使用float属性的元素即被视为块元素(内联元素也会变为块元素)


第一个块浮动起来盖住了第二个块。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
	<style>
		p{
			width:100px;height:100px;margin:0px;border:1px solid #fff;
		}
		.p1{
			background-color:#339900;float:left;
		}
		.p2{
			background-color:#FF9966;
		}
		
	</style>
	
	
    </head>
    <body>
		<p class="p1"></p>
		<p class="p2"></p>
    </body>
</html>


但是如果p1和p2都有内容后就不同了

 <body>
		<p class="p1">box1</p>
		<p class="p2">box2</p>
    </body>


但如果把  <p class="p2">box2</p> 换成 <h1>box2</h1>
看是什么效果

总结:浮动起来的块会把下个非浮动块块覆盖住,但盖不住下个非浮动块的文字和图片。
      下个块如果宽度不够则它里面的内容就会被挤到下面。所以要想下个块内容能够在右边展现
    则就把下面的块的宽度设宽。
    或者让下个非浮动块也浮动起来

   使用float属性的元素即被视为块元素(内联元素也会变为块元素)

浮动块在文档流里是不占空间的,通过firebug我们可以看到id 为”container”的父div元素的高度是0(大家可以通过给container元素设置背景色来查看container元素的大小,这里因为它的高度是0,(container 包含浮动块,浮动块中有宽高设置)

float 和clear 使用总结,因为float块不站父容空间,所以父块边框包含不了浮动块解决办法见下:

一、使用clear
<style type="text/css">
#main {background-color: #3399CC;}
#sidebar {background-color: #FF6600;    float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>

<div id="main">
 <div id="sidebar">第一段内容 第一段内容 第一段内容</div>
 <div id="container">第二段内容 第二段内容 第二段内容</div>
 <div class="clear"></div>
</div> 


二、在父块样式中写入 overflow:auto

<style type="text/css">
#main {background-color: #3399CC;overflow:auto;}
#sidebar {background-color: #FF6600;    float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}

</style>

<div id="main">
 <div id="sidebar">第一段内容 第一段内容 第一段内容</div>
 <div id="container">第二段内容 第二段内容 第二段内容</div>
</div>



对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化,通过如下方法解决:
.clear {
    clear: both;
    height:1px;
    margin-top:-1px;
    overflow:hidden;
}



另外一个例子见附件:

你可能感兴趣的:(html,css)