css float 속성 이해하기

float 속성은 css에서 정렬하기 위해 사용되는 속성입니다. 이뿐만 아니라, 다단의 레이아웃을 구성할 때, 이미지 슬라이더 등에서도 활용할 수 있습니다.


float 사용법


위 사진과 같이 이미지 옆에 글을 쓸 때에서도 사용할 수 있습니다. 이와 비슷하게 display 속성에도 이같이 응용할 수 있는데 이 둘의 차이점은 여백입니다.


float 속성 사용법


float : none | left | right


none : 기본 속성으로 적용되지 않는다는 의미의 속성값

left : 적용된 태그에 대해서 왼쪽 정렬 하는 속성값

right : 적용된 태그에 대해서 오른쪽 정렬 하는 속성값


<html>
<head>
<style>
   .layout{height:310px}
   header{width:310px;height:40px;background-color:beige;}
   .main aside{float:left;width:50px;height:250px;background-color:antiquewhite;}
   .main .content{float:left;width:250px;height:250px;}
   .main .content article{height:200px;background-color:darksalmon;}
   .main .content footer{height:50px;background-color:whitesmoke;}
</style>
</head>
<body>
   <div class="layout">
      <header>top menu</header>
      <div class="main">
         <aside>aside</aside>
         <footer>footer</footer>
      </div>
   </div>
</body>
</html>

float 레이아웃


이 글을 공유하기

댓글

Designed by JB FACTORY