日期:2014-05-16  浏览次数:20632 次

CSS_浮动与清除

浮动

把元素从常规文档流中取出。是元素脱离常规文档流

浮动的作用:

①实现文本绕排图片效果

②让原本在上下方向上堆叠的块级元素可以变成左右并列,从而实现多栏布局

文本绕排图片

首先HTML代码如下

<!DOCTYPE html>
<html>
<head>
    <title>浮动与清除</title>
    <meta charset="utf-8">
    <link href="in_css/floatandclear.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>文本绕排图片效果的实现</h1>
<img src="pic/myPic.jpg" >
<p>
    孙悟空是中国明代小说家吴承恩的著作《西游记》中的角色之一。<br>
    孙悟空,诨名行者,是唐僧的大徒弟,猪八戒、沙悟净的大师兄。会七十二变、腾云驾雾。<br>
    有一双火眼金睛,能看穿妖魔鬼怪的伪装;一个筋斗能翻十万八千里;使用兵器如意金箍棒,能大能小,<br>
    随心变化。他占花果山为王,自称齐天大圣,与如来佛祖斗法,被压在五行山下五百多年。<br>
    后经观世音菩萨点化,保护唐僧西天取经,历经九九八十一难,取回真经终成正果,被封为斗战胜佛。<br>
    代表了古代中国人善良、正义、不阿的情怀和追求。<br>
    孙悟空出生于东胜神洲傲来国花果山。感盘古开辟,三皇治世,五帝定伦,海外有一国土,名曰傲来国。<br>
    国近大海,海中有一座山,唤为花果山。此山乃十洲之祖脉,三岛之来龙,自开清浊而立,鸿蒙判后而成。<