html5

수평정렬

정렬을 하고자하는 요소에 float:left를 부여합니다. 각각의 요소의 크기를 지정합니다. 합 100%로 합니다.

부모의 요소에 overflow:hidden 속성을 부여합니다.

float 속성을 부여하게 되면 부모에서 자식의 영역을 구분할 수 없는 문제점이 발생이 됩니다.

float 속성을 해제하기 위해서 경계를 가지는 구분할 수 있는 속성을 부여 합니다.

clear:both;

부모테그를 만들지 않아도 됩니다.

또는 별도의 <div class="clear"></div>를 생성하지 않고, 부모 테그에 가상 선택자를 통하여 적용을 할 수도 있습니다.

.container::after
{
    clear:both;
    content:'';
    display:block;
}

3개의 속성값을 모두 적용을 하여야 합니다.

flex 는 아직까지 모든 브라우저가 지원을 하지 않는 단점이 있습니다.

.aside {
    width:30%;
}
.section {
    width:70%;
}
.container {
    display:flex;
}

상위 테그의 display 속성을 flex로 설정을 합니다.