Мой Справочник | CSS | Блочная вёрстка

Мой Справочник | CSS | Блочная вёрстка | Распорки

Распорка


		HTML:
		<div class="container">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="clearfix"></div>
</div>
		
		
		CSS:
		.clearfix {clear: both;}

Псевдо-распорка (сокращает код)


		HTML:
		<div class="container clearfix">
    <div class="column1"></div>
    <div class="column2"></div>
</div>
		
		
		CSS:
		.clearfix::after {

		    content: "";

		    display: table;

		    clear: both;

		}

Без распорки (выпадает из родителя)

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

C распоркой

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

C псевдо-распоркой (эффект тот же)

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT