CSS浮动布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lostcontrol_/article/details/79120189

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