7. Float

float 속성

float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다.

 

 

float 속성 값

• none - 기본 값으로 요소를 띄우지 않습니다.
• left - 왼쪽에 띄웁니다.
• right - 오른쪽에 띄웁니다.
• inherit - 부모 요소로부터 상속합니다.
• initial - 기본값으로 설정합니다.

 

clear 속성

clear는 취소하다 라는 뜻으로 float: left; 혹은 float: right; 값을 취소합니다.

 

 

clear 속성 값

• none; - 기본 값으로 전체를 취소합니다.
• left; - 왼쪽을 취소합니다.
• right; - 오른쪽을 취소합니다.
• both; - 왼쪽 오른쪽 둘 다 취소합니다.

 

 

---

실습

<!-- HTML -->
<div>
  <img class="float" src="https://source.unsplash.com/random" alt="빙수">
  <p>
    긴 내용1
  </p>
    긴 내용2
  <p class="clear">
</div>

/* CSS */
img {
  width: 300px;
}

div {
  border: 1px solid black;
}

.float {
  float: left;
}

.clear {
  clear: both;
}