CSS float 방법에 대해

CSS float 방법에 대해

 

 

 

 

block요소는 원래 세로로만 나열되는데요!?

float을 이용해 가로로 배치 할 수가 있습니다!

 

한번 알아볼까요!?

 

float 

float은 요소를 좌측이나 우츠겡 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다.
세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다.

float: left;

이렇게 작성해주면 됩니다.

 

속성 값	속성 설명
left	왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함
right	오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함

 

 

아래 코드를 살펴보면

float를 사용했을 때와 사용하지 않았을 때의 차이를

잘 알 수 있습니다.

float을 사용하지 않았을 때

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.

 

 

#aside와 #section을 보시면 여기에는 float 쓰지 않아서 레이아웃이 맞지 않습니다.

아래의 코드를 살펴보면

 

float을 사용했을 때

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.

 

 

 

이렇게 float을 써서 레이아웃이 맞춰진 걸 볼 수 있습니다.