Normal flow는 CSS2.1에 정의되어 있는 것으로 normal flow에 있는 박스들이 어떻게 계산되어 위치되어질건지를 결정하는 것을 설명한다. 크게 Block Formatting Context(BFC), Inline Formatting Context(IFC), Relative Positioning(RP)로 나뉜다.
BFC에서 박스들은 박스를 포함하는 블록요소의 상단부터 시작해서 또 다른 박스 위에 수직으로 쌓이게 된다. 두 형제 박스간의 수직거리는 인접한 박스들 간에 마진 요소로 결정된다. 각 박스를 포함하는 블록요소의 왼쪽부터 요소를 놓게 된다. float요소나, 블록 컨테이너(inline-block, table-cells, table-captions)나 ‘visible’이 아닌 overflow속성을 갖고 있는 블록 박스는 새로운 BFC를 만든다. 또한, 블록의 높이는 컨텐츠 높이만큼을 차지한다.
<div style="width: 500px">
<div style="background-color: red"> </div>
<div style="width: 200px; background-color: blue"> </div>
</div>
빨간색 블록은 width 값이 없어도 부모의 너비를 다 차지한다는 BFC정의에 의해 500px이 되고 파란색 블록의 시작점은 레드의 높이가 기준점이 된다.
IFC에서 박스는 수평으로 놓이게 되고 어떤 박스의 시작점은 이전 박스의 마지막 너비를 기준으로 시작된다. 수평 마진을 기준으로 형제간 너비가 결정되고 자식 박스들의 너비가 부모 너비보다 크다면 줄바꿈이 일어난다.
<div class="box">
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
</div>
p {
border: 2px solid green;
width: 40%;
}
두 마진의 합은 큰 마진을 따라간다.
p {
border: 2px solid green;
margin: 20px 0 40px 0;
}
