Layout - float

CSS : float 속성

 

HTML 레이아웃을 잡는데 사용하는 속성이다. 다음의 코드를 보자.

<div>
      <img class="beer" src="beer.png" alt="" />
      <div class="description">
        이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명
        이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명
      </div>
</div>

위 코드의 결과로 나온 화면을 보면 다음과 같다.

 

div 태그에 이미지에 대한 설명인 텍스트를 담고, 그 밑에 img 태그로 이미지를 불러서 화면에 출력하였다.

여기서 이미지에 대한 설명글이 이미지의 오른쪽에 붙여서 출력을 하려고 할 때, 쓰는 방법이 float 속성이다.

 

 

float : left 값을 beer 클래스 (img 태그)에 적용한 후의 모습

float 제어하기

아래와 같이 div 4개가 한 줄 씩 배치되어있다.

이 상태에서 각 숫자가 들어있는 div 에 float : left 값을 주게 되면 아래와 같이 일렬로 배치가 가능해진다.

이렇게 되었을 때, 숫자가 들어있는 div 요소들이 공중으로 붕 뜨기 때문에, 부모 요소는 float 속성을 가진 요소를 인식하지 못한다.

그래서 부모 요소의 높이 값이 확 줄어들게 된다. 

부모 요소의 높이 값을 조절하여 원래 의도했던 레이아웃을 만들 수 있지만 별로 좋은 방법은 아니다.

이럴 때 사용하는 속성이 clear 이다.

clear 속성은 float 요소를 해제하여 새롭게 줄 바꿈을 시작해준다.

사용 방법은 간단하다. float 요소 다음에 float 을 해제시킬 아무것도 들어있지 않은 요소들 추가한 뒤에 clear 속성을 주면 된다.

/* HTML */
<div class="border">
      <div class="div_unit">1</div>
      <div class="div_unit">2</div>
      <div class="div_unit">3</div>
      <div class="div_unit">4</div>
      <div class="clear_div"></div>
</div>


/* CSS file */
.border {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
}

.div_unit {
  width: 50px;
  background: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  margin: 2px 10px;
  float: left;
}

.clear_div {
  clear: both;
}

 

이렇게 하면 아래와 같이 원했던 결과가 나온다.

 

 

===참조:

http://webberstudy.com/html-css/css-2/float-layout/

float 레이아웃

http://ko.learnlayout.com/

CSS 레이아웃을 배웁시다