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