html&css공부하기 [float,clear]

행복한짱짱이 2015. 3. 12. 17:37

2015. 3. 12. 17:37

html, css공부하기 **

이번에는 float와 clear에 대해서 예제를 올리겠습니다.

예제한번 보시면서 익혀보도록할께요 ^-^

<html>

<head>

*{margin:5px; padding:0;}

#box1{width:150px; height:150px; background:yellow; float:left;}

#box2{width:150px; height:150px; background:green; float:left;}

#box3{width:150px; height:150px; background:blue; float:right;}

#box4{width:150px; heigth:150px; background:pink; clear:both;}

</style>

</head>

<body>

</body>

</html>

결과값입니다.

CSS에서 clear:both를 적용하기 전입니다.

float다음에 clear:both를 꼭 써야하는 이유!!

이해가 되시나요?? ㅠㅠ

하하핫

온라인으로 독학하는 방법도 있지만 www.oraclejava.co.kr에서 오프라인 강좌도 있으니 확인해보시구요

강사님의 도움을 받으며 몰랐던 부분을 더 자세히 공부해보세요 ^-^

html&css공부하기 float, clear 이였습니다. ><

it개발자스터디공간