这篇文章主要介绍了CSS定位中浮动和清理的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在 CSS 中，我们通过 float 属性实现元素的浮动。

行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框（如文本围绕图像）。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
这是一个有用的工具，它让周围的元素为浮动元素留出空间。

<styletype="text/css">.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}.clear{clear:both;}</style><divclass="news"><imgsrc="news-pic.jpg"/><p>sometext</p><divclass="clear"></div></div>

注释：为了进行布局，添加了无意义的标记 clear。另外一种办法，就是对容器 div 进行浮动：

<styletype="text/css">.news{background-color:gray;border:solid1pxblack;float:left;}.newsimg{float:left;}.newsp{float:right;}</style><divclass="news"><imgsrc="news-pic.jpg"/><p>sometext</p></div>

注释：效果相同。不过，虽然减少了不必要的标记，但下一个元素会受到这个浮动元素的影响。

浮动和清理 实例
将带有边框和边界的图像浮动于段落的右侧：

<html><head><styletype="text/css">img{float:right;border:1pxdottedblack;margin:0px0px15px20px;}</style></head><body><p><imgsrc="../cute.gif"/>在本实例的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是0px，下外边距是15px，而图像左侧的外边距是20px。</p></body></html>

带标题的图像浮动于右侧：

<html><head><styletype="text/css">div{float:right;width:120px;margin:0015px20px;padding:15px;border:1pxsolidblack;text-align:center;}</style></head><body><div><imgsrc="../cute.gif"/><br/>CSSisfun!</div><p>在本实例的段落中，div元素的宽度是120像素，它其中包含图像。div元素浮动到右侧。我们向div元素添加了外边距，这样就可以把div推离文本。同时，我们还向div添加了边框和内边距。</p></body></html>

使段落的首字母浮动于左侧：

<html><head><styletype="text/css">span{float:left;width:0.7em;font-size:400%;font-family:algerian,courier;line-height:80%;}</style></head><body><p><span>T</span>hisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.</p><p>在上面的段落中，文本的第一个字母包含在一个span元素中。这个span元素的宽度是当前字体尺寸的0.7倍。span元素的字体尺寸是400%，行高是80%。span中的字母字体是"Algerian"</p></body></html>

创建水平菜单：

<html><head><styletype="text/css">ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:7em;text-decoration:none;color:white;background-color:purple;padding:0.2em0.6em;border-right:1pxsolidwhite;}a:hover{background-color:#ff3300;}li{display:inline;}</style></head><body><ul><li><ahref="#">Linkone</a></li><li><ahref="#">Linktwo</a></li><li><ahref="#">Linkthree</a></li><li><ahref="#">Linkfour</a></li></ul><p>在上面的例子中，我们把ul元素和a元素浮向左浮动。li元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul元素的宽度是100%，列表中的每个超链接的宽度是7em（当前字体尺寸的7倍）。我们添加了颜色和边框，以使其更漂亮。</p></body></html>

创建无表格的首页：

<html><head><styletype="text/css">div.container{width:100%;margin:0px;border:1pxsolidgray;line-height:150%;}div.header,div.footer{padding:0.5em;color:white;background-color:gray;clear:left;}h2.header{padding:0;margin:0;}div.left{float:left;width:160px;margin:0;padding:1em;}div.content{margin-left:190px;border-left:1pxsolidgray;padding:1em;}</style></head><body><divclass="container"><divclass="header"><h2class="header">HuluMiao.cn</h2></div><divclass="left"><p>"Neverincrease,beyondwhatisnecessary,thenumberofentitiesrequiredtoexplainanything."WilliamofOckham(1285-1349)</p></div><divclass="content"><h3>FreeWebBuildingTutorials</h3><p>AtHuluMiao.cnyouwillfindalltheWeb-buildingtutorialsyouneed,frombasicHTMLandXHTMLtoadvancedXML,XSL,MultimediaandWAP.</p><p>HuluMiao.cn-TheLargestWebDevelopersSiteOnTheNet!</p></div><divclass="footer">Copyright2008byHuluMiao.cn.</div></div></body></html>

注释：使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS定位中浮动和清理的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!