(웹) element 배치하기 - float(띄우기)

기본 옵션으로 설정 

파랑

초록

빨강 배치했음.

 

잘 나온다

 

float 속성을 추가함.

 

float 속성

고정적인 배치에서 벗어날 수 있고 둥둥 떠다닐 수 있다.

일반적인 배치에서 벗어난 형태로 특별히 배치가능.

뒤에 배치된 block element가 float된 엘리먼트를 의식하지 못하고 중첩되서 배치된다.

red가 보이지 않음

green을 띄웠기 때문에 blue 아래에 red가 위치하게 되었다.

 

.green에 margin-left를 추가해서 왼쪽에서 좀 띄워주기.

성공!