第018讲 浮动 float
浮动
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<link href="float1.css" rel="stylesheet" type="text/css" />
head><body class="body"><div class="div1" /*id="specialleft"*/>此处显示新 Div 1 标签的内容div><div class="div1" /*id="specialleft"*/>此处显示新 Div 2 标签的内容div><div class="div1" /*id="specialleft"*/>此处显示新 Div 3 标签的内容div><div class="div1" /*id="specialleft"*/>此处显示新 Div 4 标签的内容div>
body>
html>
样式：
.body{padding:10px;border:1px solid #FF0000;//float:left;
}
.div1{width:150px;height:100px;background:#CC66FF; border:1px solid blue;padding:3px;margin-top:10px;}
#special{float:right
}
#specialleft{float:left
}
结果：
代码：
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=gb2312" />
无标题文档
"float1.css" rel="stylesheet" type="text/css" />
class="body"><div class="div1" id="specialleft">此处显示新 Div 1 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 2 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 3 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 4 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 5 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 6 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 7 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 8 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 9 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 10 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 11 标签的内容div><div class="div1" id="specialleft">此处显示新 Div 12 标签的内容div>
样式：
.body{padding:10px;border:1px solid #FF0000;float:left;
}
.div1{width:150px;height:100px;background:#CC66FF; border:1px solid blue;padding:3px;margin-top:10px;
}
#special{float:right
}
#specialleft{float:left
}
结果：
当其中某一条div 高度突然多出几像素的话比如：
<div style="height:130px" class="div1" id="specialleft">此处显示新 Div 1 标签的内容div>
然后效果：
从第几个高度变化那就从第几个往后排
如果使用了浮动属性，则该元素不管是不是块元素，都会按照快的方式也就是 display：block；来显示（貌似有浏览器支持问题）
比如：
用span标签测试
当加上id浮动的时候识别宽高，不加上id浮动连宽高都不识别。。。。
字包图
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字包图title>
<link href="float3.css" rel="stylesheet" type="text/css" />
head><body>
<img src="go_home_and_shop.png" alt="忘了这是啥了。描述" class="img" />是的方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复反复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复方法反反复复反复反复收拾收拾三十岁事实上事实上事实上事实上事实上事实上三十岁事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上是水水水水水水水水水水水水色鹅鹅鹅鹅鹅鹅呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯是多少事实上事实上是事实上事实上事实上事实上是是事实上事实上事实上事实上是事实上事实上事实上事实上是事实上事实上事实上事实上是是事实上事实上事实上事实上是三十岁事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上是事实上事实上事实上事实上是是事实上事实上事实上事实上是
body>
html>样式：
.img{width:80px;height:80px;float:left;
}效果：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！