1. Introduction

배울것

box model, nomal document flow, floats, postion property, stacking order and Z-index

overflowing Content, text columns

2. Box Model Review

box, inline형 elements

width, height, padding, border, margin

3. nomal document Flow

순서대로 표시함

4. Floating elements

img{

  float: left:

  margin: 10px}

}

float left, right을 하면 normal document flow에서 벗어남.

5. Clearing Floats

clear: left or right or both;

margin을 주어도 float도 된 곳으로 올라감. 

empty div를 넣은 방법도 있겠지만. HTML에 쓸데 없는 코드가 들어감.

float되는 class에 after를 상요함.

.service:after {

  content: "";

  display: block;

  clear: both;

}

6. Floating columns