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;
}



另外一个例子见附件:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值