css 的 float 与clear

最新推荐文章于 2024-06-14 14:36:26 发布

ywzqzhangjiawei

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量105

点赞数

分类专栏： html web应用文章标签： css html

本文链接：https://blog.csdn.net/ywzqzhangjiawei/article/details/84199602

版权

web应用同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

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

另外一个例子见附件：

ywzqzhangjiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 的 float 与clear

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

扫一扫