HTML/CSS - CSS float과 inline block (블록 스타일을 위로 정렬)

display

• inline-block

-> 영역을 inline style의 block으로 설정하여 block스타일을 유지하면서 공백이 삭제된다

 

float

• left, right

-> float은 해당 영역 이후를 3차원화하여 공백 영역을 삭제한다 (겹치는 부분 발생)

 

**inline-block의 경우 border가 각각 생성되어 겹치는 영역의 border가 2배가 되기 때문에

    float:left를 사용하여 border의 선이 겹치게 해주면 편리함

 

clear

• both

-> claer가 적용된 영역부터 float 해제

 

 

• 큰 테두리 안의 작은 영역들에 float을 주면 테두리 밖 영역에는 영향을 미치지 않는 것 같다
  • 반대의 경우로, 큰 영역에 float 설정 시에도 내부에 영향을 미치지 않는 것 같다
• 생각대로 위치가 변경되지 않을 경우 남은 영역의 width가 선택한 영역의 width보다 작지 않은지 보아야한다
• 선택 영역이 생각보다 커졌다면 box-sizing: border-box; 설정을 하였는지 확인한다
• 선두 영역에 float: left를 줬다면 이후 영역들은 inline-block을 주어 top쪽으로 정렬 가능
  • float을 남발하여 html에 <div style="clear:both;></div>를 줘야 하는 일을 줄일 수 있을 것으로 보인다