css之浮动

最新推荐文章于 2025-05-26 20:21:04 发布

原创最新推荐文章于 2025-05-26 20:21:04 发布 · 196 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

float元素：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当父元素设置了浮动时，子元素可以使用clear来清除浮动；

clear有以下属性：left/right，both,none,他表示哪些边框可以不挨着浮动框

<!DOCTYPE html> <html> <head lang="en"> 	<meta charset="utf-8"> 	<title></title> 	<style> 	#fd{width<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8">
	<title></title>
	<style>
	#fd{width:100px; height: 100px; background: red;float:left;}
	#sd{width:100px; height: 100px; background:green;float:left;}
	#td{width:100px; height: 100px; background:blue;float:left;}
	#container{width:280px; height:500px;background:gray;}	
	#text{clear:left;}
	</style>
	
</head>
<div id="container">
	<div id="fd"></div>
	<div id="sd"></div>
	<div id="td"></div>
	<div id="text">hello world</div>
</div>	
<body>
	
</body>


</html>

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