[CODECADEMY] 코드카데미 : Float 과 Clear

 

 

1.  Float

 

 

페이지에서 요소를 최대한 왼쪽이나 오른쪽으로 이동하려는 경우 float속성을 사용할 수 있습니다 .

이 float특성은 다음 두 값 중 하나로 설정 될 수 있습니다.

left - 이 값은 요소를 가능한 한 왼쪽으로 이동하거나 플로팅합니다.
right - 이 값은 요소를 최대한 오른쪽으로 이동합니다.

 

 

.boxes {
  width: 120px;
  height: 70px;
}

.box-bottom {
  background-color: DeepSkyBlue;
  float: right;
}

위의 예에서 .box-bottom요소를 right로 플로팅 합니다 . 

이것은 정적 및 상대적 위치 요소에 적용됩니다. 아래 코드의 결과를 참조하십시오.

 

플로팅 된 요소에는 위의 예와 같이 너비가 지정되어 있어야합니다. 

그렇지 않으면 요소는 포함하는 요소의 전체 너비를 가정하며 

부동 소수점 값을 변경해도 눈에 띄는 결과가 나오지 않습니다.

 

 

https://thrillfighter.tistory.com/484

html css float 속성 정리

 

https://webclub.tistory.com/606

플로팅(float) 레이아웃과 clear 속성

 

 

 

 

---

 

2. clear

 

float속성을 사용하여 여러 요소를 한 번에 플로팅 할 수도 있습니다.

그러나 여러 부동 요소의 높이가 다른 경우 페이지의 레이아웃에 영향을 줄 수 있습니다. 

특히, 요소는 서로“범프”할 수 있으며 다른 요소가 왼쪽이나 오른쪽으로 올바르게 이동할 수 없습니다.

 

 clear속성은 요소가 페이지에서 서로 충돌 할 때 동작하는 방식을 지정합니다. 

 

 

다음 값 중 하나를 취할 수 있습니다.

 

 

1. left — 요소의 왼쪽은 동일한 포함 요소 내의 다른 요소와 접촉하지 않습니다.
2. right — 요소의 오른쪽은 동일한 포함 요소 내의 다른 요소와 접촉하지 않습니다.
3. both — 요소의 어느 쪽도 같은 포함 요소 내의 다른 요소와 접촉하지 않습니다.
4. none — 요소가 어느 한 쪽을 만질 수 있습니다.

 

div {
  width: 200px;
  float: left;
}

div.special {
  clear: left;
}

 

 

위의 예에서 페이지의 모든 <div>가 왼쪽에 표시됩니다. 

하지만 div.special은 float 된 값이 clear되어 왼쪽으로 이동 안됨.