float&clear

๐Ÿ“„ float

float์†์„ฑ์€ ์š”์†Œ๊ฐ€ ๋ฌธ์„œ์˜ ํ๋ฆ„์—์„œ ์ œ์™ธ๋˜์–ด ์ž์‹ ์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” ์ปจํ…Œ์ด๋„ˆ์˜ ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜๋˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
๋ฌธ์„œ์˜ ํ๋ฆ„์—์„  ์ œ์™ธ๋˜์ง€๋งŒ, ํ•„์š”ํ•œ ๋งŒํผ์˜ ๊ณต๊ฐ„์€ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

์ฃผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ๋•Œ ๋ธ”๋ก๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ๊ฐ€๋กœ ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

float์˜ ์†์„ฑ๊ฐ’

  • none: ๊ธฐ๋ณธ๊ฐ’
  • left: ์™ผ์ชฝ๋ถ€ํ„ฐ ๊ฐ€๋กœ์ •๋ ฌ
  • right: ์˜ค๋ฅธ์ชฝ๋ถ€ํ„ฐ ๊ฐ€๋กœ์ •๋ ฌ
float: left;
float: right;
margin: 0 auto; /* ์ค‘์•™ ์ •๋ ฌ */

๐Ÿ“„ clear

clear์†์„ฑ์€ float ์š”์†Œ ์ดํ›„์— ํ‘œ์‹œ๋˜๋Š” ์š”์†Œ์˜ ๋™์ž‘๋“ค์„ ์กฐ์ ˆํ•ฉ๋‹ˆ๋‹ค.

์ปจํ…Œ์ด๋„ˆ ์š”์†Œ์— float์š”์†Œ๋ฅผ ์ ์šฉํ•˜๊ณ  ์ดํ›„ ์š”์†Œ์— ๋”์ด์ƒ float์„ ์ ์šฉํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

clear์˜ ์†์„ฑ๊ฐ’

  • none: ๊ธฐ๋ณธ๊ฐ’
  • left: float์ด left์ธ ์š”์†Œ์˜ ์•„๋ž˜๋กœ ๋‚ด๋ ค๊ฐ€๊ฒ ๋‹ค
  • right: float์ด right์ธ ์š”์†Œ์˜ ์•„๋ž˜๋กœ ๋‚ด๋ ค๊ฐ€๊ฒ ๋‹ค
  • both: float์ด left๋ฐ right์ธ ์š”์†Œ์˜ ์•„๋ž˜๋กœ ๋‚ด๋ ค๊ฐ€๊ฒ ๋‹ค
.left {
  background-color: #ff8c00;
  width: 150px;
  height: 50px;
  float: left;
}
.right {
  background-color: #9932cc;
  width: 150px;
  height: 50px;
  float: right;
}
p {
  clear: both;
}

์ถœ์ฒ˜

Leave a comment