Ópoê 13:
Bcïëûâaþùèe ýëeìeíòû (ïoïëaâêè)

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:
êapòèíêa

Ecëè ìû, íaïpèìep, xoòèì, ÷òoáû òeêcò oêpyæaë pècyíoê, òo peçyëüòaò äoëæeí áûòü òaêèì:
êapòèíê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

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;}

Peçþìe

Ï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â

Haçaä

Bâepx