仓酷云

标题: 来谈谈：英文教程:CSS的Float [打印本页]

作者: 萌萌妈妈 时间: 2015-1-15 23:52
标题: 来谈谈：英文教程:CSS的Float
结构清晰，容易被搜索引擎搜索到，天生优化了seo

网页制造poluoluo文章简介：英文教程:CSS的Float.
Whatis“Float”?

FloatisaCSSpositioningproperty.Tounderstanditspurposeandorigin,wecanlooktoprintdesign.Inaprintlayout,imagesmaybesetintothepagesuchthattextwrapsaroundthemasneeded.Thisiscommonlyandappropriatelycalled“textwrap”.Hereisanexampleofthat.

Inpagelayoutprograms,theboxesthatholdthetextcanbetoldtohonorthetextwrap,ortoignoreit.Ignoringthetextwrapwillallowthewordstoflowrightovertheimagelikeitwasn’teventhere.Thisisthedifferencebetweenthatimagebeingpartoftheflowofthepage(ornot).Webdesignisverysimilar.

Inwebdesign,pageelementswiththeCSSfloatpropertyappliedtothemarejustliketheimagesintheprintlayoutwherethetextflowsaroundthem.Floatedelementsremainapartoftheflowofthewebpage.Thisisdistinctlydifferentthanpageelementsthatuseabsolutepositioning.Absolutelypositionedpageelementsareremovedfromtheflowofthewebpage,likewhenthetextboxintheprintlayoutwastoldtoignorethepagewrap.Absolutelypositionedpageelementswillnotaffectthepositionofotherelementsandotherelementswillnotaffectthem,whethertheytoucheachotherornot.

SettingthefloatonanelementwithCSShappenslikethis:

#sidebar{float:right;}

复制代码

Therearefourvalidvaluesforthefloatproperty.LeftandRightfloatelementsthosedirectionsrespectively.None(thedefault)ensurestheelementwillnotfloatandInheritwhichwillassumethefloatvaluefromthatelementsparentelement.
Whatarefloatsusedfor?

Asidefromthesimpleexampleofwrappingtextaroundimages,floatscanbeusedtocreateentireweblayouts.

Floatsarealsohelpfulforlayoutinsmallerinstances.Takeforexamplethislittleareaofawebpage.Ifweusefloatforourlittleavatarimage,whenthatimagechangessizethetextintheboxwillreflowtoaccomodate:

Thissamelayoutcouldbeaccomplishedusingrelativepositioningoncontainerandabsolutepositioningontheavataraswell.Indoingitthisway,thetextwouldbeunafftedbytheavatarandnotbeabletoreflowonasizechange.

ClearingtheFloat

Float’ssisterpropertyisclear.Anelementthathastheclearpropertysetonitwillnotmoveupadjacenttothefloatlikethefloatdesires,butwillmoveitselfdownpastthefloat.Againanillustrationprobablydoesmoregoodthanwordsdo.

Intheaboveexample,thesidebarisfloatedtotherightandisshorterthanthemaincontentarea.Thefooterthenisrequiredtojumpupintothatavailablespaceasisrequiredbythefloat.Tofixthisproblem,thefootercanbeclearedtoensureitstaysbeneathbothfloatedcolumns.

#footer{clear:both;}

复制代码

Clearhasfourvalidvaluesaswell.Bothismostcommonlyused,whichclearsfloatscomingfromeitherdirection.LeftandRightcanbeusedtoonlyclearthefloatfromonedirectionrespectively.Noneisthedefault,whichistypicallyunnecessaryunlessremovingaclearvaluefromacascade.Inheritwouldbethefifth,butisstranglynotsupportedinInternetExplorer.Clearingonlytheleftorrightfloat,whilelesscommonlyseeninthewild,definitelyhasitsuses.

TheGreatCollapse

Oneofthemorebewilderingthingsaboutworkingwithfloatsishowtheycanaffecttheelementthatcontainsthem(their“parent”element).Ifthisparentelementcontainednothingbutfloatedelements,theheightofitwouldliterallycollapsetonothing.Thisisn’talwaysobviousiftheparentdoesn’tcontainanyvisuallynoticeablebackground,butitisimportanttobeawareof.

Asanti-intuitiveascollapsingseemstobe,thealternativeisworse.Considerthisscenario:

Iftheblockelementontopwheretohaveautomaticallyexpandedtoaccomodatethefloatedelement,wewouldhaveanunnaturalspacingbreakintheflowoftextbetweenparagraphs,withnopracticalwayoffixingit.Ifthiswerethecase,usdesignerswouldbecomplainingmuchharderaboutthisbehaviorthanwedoaboutcollapsing.
Collapsingalmostalwaysneedstobedealtwithtopreventstrangelayoutandcross-browserproblems.Wefixitbyclearingthefloatafterthefloatedelementsinthecontainerbutbeforethecloseofthecontainer.
TechniquesforClearingFloats

Ifyouareinasituationwhereyoualwaysknowwhatthesucceedingelementisgoingtobe,youcanapplytheclear:both;valuetothatelementandgoaboutyourbusiness.Thisisidealasitrequiresnofancyhacksandnoadditionalelementsmakingitperfectlysemantic.Ofcoursethingsdon’ttypicallyworkoutthatwayandweneedtohavemorefloat-clearingtoolsinourtoolbox.

TheEmptyDivMethodis,quiteliterally,anemptydiv.<divstyle="clear:both;"><div>.Sometimesyou’llseea<br/>elementorsomeotherrandomelementused,butdivisthemostcommonbecauseithasnobrowerdefaultstyling,doesn’thaveanyspecialfunction,andisunlikelytobegenericallystyledwithCSS.Thismethodisscornedbysemanticpuristssinceitspresencehasnocontexualmeaningatalltothepageandistherepurelyforpresentation.Ofcourseinthestrictestsensetheyareright,butitgetsthejobdonerightanddoesn’thurtanybody.
TheOverflowMethodreliesonsettingtheoverflowCSSpropertyonaparentelement.Ifthispropertyissettoautoorhiddenontheparentelement,theparentwillexpandtocontainthefloats,effectivelyclearingitforsucceedingelements.Thismethodcanbebeautifullysemanticasitmaynotrequireanadditionalelements.Howeverifyoufindyourselfaddinganewdivjusttoapplythis,itisequallyasunsemanticastheemptydivmethodandlessadaptable.Alsobearinmindthattheoverflowpropertyisn’tspecificallyforclearingfloats.Becarefulnottohidecontentortriggerunwantedscrollbars.
TheEasyClearingMethodusesacleverCSSpseduoselector(:after)toclearfloats.Ratherthansettingtheoverflowontheparent,youapplyanadditionalclasslike“clearfix”toit.ThenapplythisCSS:
1. .clearfix:after{content:".";visibility:hidden;display:block;height:0;clear:both;}
复制代码
Thiswillapplyasmallbitofcontent,hiddenfromview,aftertheparentelementwhichclearsthefloat.Thisisn’tquitethewholestory,asadditionalcodeneedstobeusedtoaccomodateforolderbrowsers.

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

作者: 透明 时间: 2015-1-17 23:43
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 山那边是海 时间: 2015-1-24 15:12
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 乐观 时间: 2015-2-1 19:49
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 小妖女 时间: 2015-2-7 16:20
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 谁可相欹 时间: 2015-2-22 20:18
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 飘灵儿 时间: 2015-3-7 04:18
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小女巫 时间: 2015-3-14 13:14
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 仓酷云 时间: 2015-3-21 09:49
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)