Oãëaâëeíèe (â íoâoì oêíe)
Bíèç
Ýëeìeíò ìoæeò "âcïëûâaòü"
âïpaâo èëè âëeâo c ïoìoùüþ
câoécòâa float. To ecòü áoêc c
eão coäepæèìûì ìoæeò
âcïëûâaòü âïpaâo èëè âëeâo â
oêíe äoêyìeíòa (èëè
coäepæaùeão áoêca) (cì. â
Ópoêe 9 oïècaíèe áoêcoâoé
ìoäeëè). Ïpèíöèïû ïoêaçaíû
ía pècyíêe:
Ecëè ìû, íaïpèìep, xoòèì,
÷òoáû òeêcò oêpyæaë pècyíoê,
òo peçyëüòaò äoëæeí áûòü
òaêèì:
Kaê ýòo cäeëaòü?
HTML-êoä äëÿ ýòoão ïpèìepa:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>
causas naturales et
antecedentes, idciro etiam
nostrarum voluntatum...
</p>
×òoáû pècyíoê âcïëûâaë âëeâo, a òeêcò oêpyæaë eão, âû äoëæíû oïpeäeëèòü øèpèíy áoêca, oêpyæaþùeão pècyíoê, è ycòaíoâèòü â câoécòâe float çía÷eíèe left:
#picture
{float:left; width: 100px;}
Ïoïëaâêè/Floats ìoæío ècïoëüçoâaòü äëÿ âûâoäa êoëoíoê â äoêyìeíòe. Äëÿ ýòoão âû äoëæíû ïpocòo oïpeäeëèòü íeoáxoäèìûe êoëoíêè â HTML-êoäe òýãaìè <div> òaêèì oápaçoì:
<div id="column1">
<p>Haec
disserens qua de re agatur et
in quo causa consistat non
videt...</p>
<div>
<div id="column2">
<p>causas
naturales et antecedentes,
idciro etiam nostrarum
voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil
esset in nostra potestate si res
ita se haberet...</p>
</div>
Teïepü íeoáxoäèìyþ øèpèíy êoëoíoê ycòaíoâèì, íaïpèìep, 33%, a çaòeì ycòaíoâèì âcïëûâaíèe êaæäoé âëeâo â câoécòâe float:
#column1
{float:left; width: 33%;}
#column2
{float:left; width: 33%;}
#column3
{float:left; width: 33%;}
float ìoæeò èìeòü çía÷eíèÿ left, right èëè none.
Câoécòâo clear yïpaâëÿeò
ïoâeäeíèeì
ïocëeäoâaòeëüíocòüþ
âcïëûâaþùèx ýëeìeíòoâ
äoêyìeíòa.
Ïo yìoë÷aíèþ
ïocëeäoâaòeëüíûe ýëeìeíòû
cìeùaþòcÿ ââepx, çaïoëíÿÿ
äocòyïíoe ïpocòpaícòâo,
êoòopoe ocâoáoæäaeòcÿ, ecëè
áoêc âcïëûâaeò â còopoíy.
Ïocìoòpèòe ía ïpeäûäyùèé
ïpèìep, ãäe òeêcò
aâòoìaòè÷ecêè cìeùaeòcÿ
ââepx âäoëü èçoápaæeíèÿ
Áèëa Ãeéòca.
Câoécòâo clear ìoæeò èìeòü çía÷eíèÿ left, right, both èëè none. Ïpèíöèï òaêoâ, ÷òo ecëè clear, íaïpèìep, èìeeò äëÿ áoêca çía÷eíèe both, òo âepxíèé êpaé paìêè ýòoão áoêca âceãäa áyäeò íaxoäèòücÿ ïoä íèæíèì êpaeì ïoëÿ âoçìoæíûx âcïëûâaþùèx câepxy áoêcoâ.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop" >
causas
naturales et antecedentes,
idciro etiam nostrarum
voluntatum...
</p>
×òoáû íe äaòü òeêcòy âcïëûâaòü ââepx ïepeä pècyíêoì, ìû ìoæeì äoáaâèòü òaêoé êoä CSS:
#picture
{float:left; width: 100px;}
.floatstop{clear:both;}
Ïoïëaâêè ìoæío ècïoëüçoâaòü â paçíûx cèòyaöèÿx, ÷acòo - oäíoâpeìeíío c ïoçèöèoíèpoâaíèeì. B cëeäyþùeì ypoêe ìû paçáepeì, êaê ïoçèöèoíèpoâaòü áoêc, oòíocèòeëüío èëè aácoëþòío.
Cëeäyþùèé ypoê: Ïoçèöèoíèpoâaíèe ýëeìeíòoâ