๐Ÿ’›[๋ถ€์ŠคํŠธ์ฝ”์Šค_์›น UI ๊ฐœ๋ฐœ] 12. float ํ•ด์ œ

๐Ÿ‘พยท2021๋…„ 1์›” 28์ผ
0

HTML & CSS

๋ชฉ๋ก ๋ณด๊ธฐ
12/20

float ํ•ด์ œ

float์˜ ํŠน์„ฑ
float์ด ์ ์šฉ๋œ ์š”์†Œ๋Š” ๊ทธ ํ๋ฆ„์—์„œ ๋ฒ—์–ด๋‚˜์„œ ๋ ˆ์ด์•„์›ƒ ์ƒ ๋„์›Œ์ง€๊ฒŒ ๋œ๋‹ค.
์ฃผ๋ณ€ ํ…์ŠคํŠธ๋‚˜ ์ธ๋ผ์ธ ์š”์†Œ๊ฐ€ ์ฃผ์œ„๋ฅผ ๊ฐ์‹ธ๋Š” ํŠน์ง•์ด ์žˆ๋‹ค.

float์œผ๋กœ ์ž„์˜์˜ ์š”์†Œ๋ฅผ ์™ผ์ชฝ/์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋ ค๊ณ  ํ•˜์ง€๋งŒ float์˜ ํŠน์ง•๋•Œ๋ฌธ์— ์ฃผ๋ณ€ ์š”์†Œ๋“ค์— ์˜ํ–ฅ์„ ๋ผ์ณ์„œ ์›ํ•˜๋Š”๋Œ€๋กœ ๋…ธ์ถœ์ด ๋˜์ง€ ์•Š์Œ.

์ด๋Ÿฐ ํ˜„์ƒ๋“ค์„ ๋ง‰๊ณ  ๋’ค์— float์˜ ํ˜„์ƒ์ด ์ง€์†๋˜๋Š”๊ฒƒ์„ ๋ง‰๋Š” ๋ฐฉ๋ฒ•์„ float์„ ํ•ด์ œํ•œ๋‹ค๋ผ๊ณ  ํ‘œํ˜„.

ํ•ด์ œ๋ฐฉ๋ฒ•

  • ๋ถ€๋ชจ์š”์†Œ์— ๋†’์ด๊ฐ’์„ ๊ฐ•์ œ๋กœ ๋ถ€์—ฌํ•ด์„œ floating๋œ ์š”์†Œ๊ฐ€ ๊ทธ ์•ˆ์— ์ž๋ฆฌ์žก๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•
  • ๋ถ€๋ชจ ์š”์†Œ ๋˜ํ•œ ๋งŒ์•ฝ floating์ด ๋˜์–ด์žˆ๋‹ค๋ฉด ์ž์‹์˜ floating ์š”์†Œ๋“ค์€ ์ž๋™์œผ๋กœ ํ•ด์ œ๊ฐ€ ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ถ€๋ชจ์š”์†Œ์—๊ฒŒ visible์„ ์ œ์™ธํ•œ overflow๋ฅผ ๋„ฃ์–ด์„œ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • floating๋œ ์š”์†Œ์˜ ๋’ค์— ์ธ์ ‘ํ•˜๋Š” ํ˜•์ œ์š”์†Œ์—๊ฒŒ clear ์†์„ฑ์„ ์ฃผ์–ด์„œ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • clear์†์„ฑ๊ณผ ์—ฐ๊ณ„ํ•ด์„œ ํ˜•์ œ์š”์†Œ๊ฐ€ ์•„๋‹Œ ๊ฐ€์ƒ์˜ ์š”์†Œ๋ฅผ ์ด์šฉํ•ด clear ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•
  1. ๋ถ€๋ชจ ์š”์†Œ height ๋ถ€์—ฌ
    ์ž์‹์˜ ๋†’์ด๊ฐ’์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ๋ถ€๋ชจ ์š”์†Œ์—๊ฒŒ๋„ ๋™์ผํ•œ ๋†’์ด๊ฐ’์„ ์ค˜์„œ ์ž์‹ ์š”์†Œ๋ฅผ ๊ฐ์Œ€ ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•.
<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>
.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  height: 100px;  /* ์ž์‹์ธ .box๋“ค์˜ ๋†’์ด๊ฐ’์ด ๊ณ ์ •์ผ๊ฒฝ์šฐ ๊ฐ™์€ ๋†’์ด๊ฐ’์„ ๋ถ€์—ฌํ•จ. */
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  background-color: pink;
}

์ด ๋ฐฉ๋ฒ•์€ ์ „์ฒด์˜ ํ๋ฆ„์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•์ผ๋ฟ
๊ทธ๋ฆฌ๊ณ  ์ •ํ™•ํ•˜๊ฒŒ๋Š” float์ด ํ•ด์ œ๋œ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๋ˆˆ์†์ž„๊ณผ ๊ฐ™์€ ํ•ด์ œ๋ฐฉ๋ฒ•์ด๋‹ค.
์ž์‹์˜ ๋†’์ด๊ฐ€ ๋ณ€ํ™”ํ• ๋•Œ ๋ถ€๋ชจ์˜ ๋†’์ด๊ฐ’์€ ์ž์‹์˜ ๋†’์ด๊ฐ’์— ๋Œ€ํ•ด ์ˆ˜๋ ดํ•˜์ง€ ๋ชปํ•˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค.

์ฆ‰ ์ด ๋ฐฉ๋ฒ•์€ ์ž์‹ ์š”์†Œ๊ฐ€ ๊ณ ์ •๋œ ๋†’์ด๊ฐ’์„ ๊ฐ€์ง€๋ฉฐ, ๋ถ€๋ชจ ์—ญ์‹œ ๊ณ ์ •๋œ ๋†’์ด๊ฐ’์„ ๊ฐ€์ง„ ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  1. ๋ถ€๋ชจ ์š”์†Œ์˜ float ์†์„ฑ
    ๋ถ€๋ชจ ์š”์†Œ์— float์†์„ฑ์ด ์žˆ๋Š” ๊ฒฝ์šฐ
    ์ž์‹์š”์†Œ๊ฐ€ ์ขŒ์šฐ๋กœ floating๋˜์–ด์žˆ์„๋•Œ ๋ถ€๋ชจ๊ฐ€ float๊ฐ’์„ ๊ฐ€์ง€๋ฉด ๋ถ€๋ชจ ์š”์†Œ๋Š” ์ž์‹ ์š”์†Œ์˜ ๋†’์ด๊ฐ’์— ์ˆ˜๋ ดํ•˜๊ฒŒ ๋œ๋‹ค.
.box_wrap {
  width: 400px;
  /*์˜ˆ์ œ๋ฅผ ์œ„ํ•ด 400px์ด๋ผ๋Š” ๊ฐ€๋กœ๊ฐ’ ๋ถ€์—ฌ*/
  margin: 0 auto;
}
.box_parent {
  float:left;
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  background-color: pink;
}

๋ถ€๋ชจ์š”์†Œ์— float:left;๋ฅผ ์ฃผ๊ฒŒ ๋˜๋ฉด ๋ธ”๋ก ์š”์†Œ๋กœ์จ ๋ถ€๋ชจ๊ฐ€ 400px๋ฅผ ํ•จ๊ผ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๋ถ€๋ชจ ์š”์†Œ๊ฐ€ floating๋˜๋ฉด์„œ ์Šค์Šค๋กœ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์ˆ˜๋ ด๋˜๋Š” ์ž์‹์š”์†Œ์˜ ๊ฐ€๋กœ ์‚ฌ์ด์ฆˆ ๋งŒํผ์œผ๋กœ ์ค„์–ด๋“ค์—ˆ๋‹ค.

์ด๋–„ ๋ถ€๋ชจ ์š”์†Œ์ธ box_parent๋„ floating๋˜๋ฉด์„œ ๋ถ€๋ชจ์š”์†Œ์˜ ๋ถ€๋ชจ ์š”์†Œ์ธ box_wrap์—๋„ ํ•ด์ œ๊ฐ€ ํ•„์š”ํ•œ ์ƒํ™ฉ์ด ๋จ.

๊ฒฐ๋ก 
์ด ๋ฐฉ๋ฒ•์€ ์ด๋ฏธ floating๋˜์–ด์žˆ๋Š” ๋ถ€๋ชจ ์š”์†Œ๊ฐ€ ์ž์‹ ์š”์†Œ๋“ค์ด floating์ด ๋œ๋‹ค๊ณ  ํ–ˆ์„๋•Œ ๊ตณ์ด ๋”ฐ๋กœ ํ•ด์ œ ๋ฐฉ๋ฒ•์„ ๋ณด์œ ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ์ •๋„๋กœ๋งŒ ์ธ์‹ํ•˜๊ณ  ๋งˆํฌ์—…์„ ํ•ด์•ผํ•œ๋‹ค.
์ž์‹ ์š”์†Œ์˜ floating์„ ํ•ด์ œํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ทธ ๋ถ€๋ชจ์š”์†Œ์—๊ฒŒ float ์š”์†Œ๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํ•ด์ œ๋ฅผ ํ•˜๋Š”๊ฒƒ์€ ๋ณ„๋กœ ์ข‹์ง€ ๋ชปํ•œ ๋ฐฉ๋ฒ•

  1. overflow(visible ์ œ์™ธ)๋ฅผ ์ด์šฉํ•œ ํ•ด์ œ
    ๋ถ€๋ชจ ์š”์†Œ์˜ visible ์†์„ฑ๊ฐ’์„ ์ œ์™ธํ•œ overflow์†์„ฑ์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•
    ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ•ด์ œ ๋ฐฉ๋ฒ•์ค‘ ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•
.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  overflow: hidden; /* ๋ถ€๋ชจ์š”์†Œ์—๊ฒŒ overflow (visible ์ œ์™ธ) ๋ถ€์—ฌ */
  border: 3px dotted blue;
  padding: 10px; 
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.pop{
  position:absolute;
  right:-50px;
  top:150px;
  width:100px;
  height:100px;
  background-color:#ddd;
}

๋ฐ”๋กœ ๋†’์ด๊ฐ’์„ ์ˆ˜๋ ดํ•˜๋Š” ํ˜•ํƒœ๋กœ ๋ณ€ํ•จ.
์ž์‹์˜ ๋†’์ด๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋„ ์ž์‹์˜ ๋†’์ด๊ฐ’์„ ๊ทธ๋Œ€๋กœ ์ˆ˜๋ ดํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ถ€๋ชจ๋„ ๋†’์ด๊ฐ€ ๋งž์ถฐ์ ธ์„œ ๋Š˜์–ด๋‚œ๋‹ค.

๋‹จ์ 
๋งŒ์•ฝ ๋ถ€๋ชจ ์š”์†Œ์•ˆ์— ํŒ์—…๊ณผ ๊ฐ™์€ ์ฝ˜ํ…์ธ ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="pop">popup</div>
    <!--ํŒ์—…์ด๋ผ๋Š” ํด๋ž˜์Šค ์ƒ์„ฑ-->
  </div>
</div>

ํŒ์—…์ด ๋ถ€๋ชจ ์š”์†Œ์— ํฌํ•จ๋œ ๋ถ€๋ถ„๋งŒ ๋ณด์ด๊ณ  ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์€ overflow:hidden๋•Œ๋ฌธ์— ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค.
๊ทธ๋ž˜์„œ ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์„œ float์„ ํ•ด์ œํ•  ๋•Œ๋Š” ์•ˆ์˜ ๋‚ด์šฉ์ค‘ ๋ถ€๋ชจ์˜ ๋‚ด์šฉ์„ ๋„˜์ณ๋‚˜์„œ ๋…ธ์ถœ๋˜๋Š” ์ปจํ…์ธ ๋Š” ์—†๋Š”์ง€ ํ™•์ธ ๋ฐ ํŒŒ์•…์ด ๋˜์—ˆ์„๋–„ ์‚ฌ์šฉํ•ด์•ผํ•จ.

ํ•˜์ง€๋งŒ ์ด ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ๊ฐ„๋‹จํ•˜๊ณ  ํ™•์‹คํ•œ ํ•ด์ œ ๋ฐฉ๋ฒ•์ด๊ธฐ ๋•Œ๋ฌธ์— ๋’ค์— ๋‚˜์˜ฌ ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์ด์šฉํ•œ ํ•ด์ œ ๋ฐฉ๋ฒ•๊ณผ ๋”๋ถˆ์–ด์„œ ์œ„์˜ ์ด์Šˆ ์ƒํ™ฉ๋งŒ ์ •ํ™•ํ•˜๊ฒŒ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํ•ด์ œ ๋ฐฉ๋ฒ•์ค‘ ํ•˜๋‚˜์ด๋‹ค.

  1. ์ธ์ ‘ ํ˜•์ œ์š”์†Œ์˜ clear ์†์„ฑ์„ ์ด์šฉํ•œ ํ•ด์ œ
    clear์†์„ฑ์€ float์˜ ํ๋ฆ„์„ ๋Š๊ธฐ ์œ„ํ•œ float ํ•ด์ œ ์ „์šฉ ์†์„ฑ.

left, right, both, none์ด๋ผ๋Š” ์†์„ฑ๊ฐ’ ๊ฐ€์ง

  • ๊ฐ๊ฐ float์˜ left์„ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • float์˜ right๋ฅผ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • ์–‘์ชฝ ๋ชจ๋‘๋ฅผ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • ํ•ด์ œ ํ•˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•


๋งˆํฌ์—… ์ˆœ์„œ
: box1 -> box2 -> ๋นˆ span ์˜์—ญ
box1๊ณผ box2๋Š” ์ขŒ์šฐ๋กœ floating์ด ๋˜์–ด์žˆ๋Š” ์ƒํƒœ
๊ทธ์™€ ์ธ์ ‘ํ•ด์žˆ๋Š” ํ˜•์ œ์š”์†Œ์ธ ๋นˆ span์— clear:both๋ผ๋Š” ์†์„ฑ์œผ๋กœ box ๋‘๊ฐœ์˜ ๋’ค๋กœ ๋‚˜์˜ฌ ํ˜•์ œ๊ฐ€ float์˜ ์˜์—ญ์—์„œ ๋ฒ—์–ด๋‚˜๋Š”๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="clear"></div>
    <!-- ์˜๋ฏธ๊ฐ€ ์—†๋Š” ๋นˆํƒœ๊ทธ-->
  </div>
</div>
.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.clear {
  clear: both;
}

box์˜ ๋†’์ด๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋„ ๋†’์ด๊ฐ’์ด ์ˆ˜๋ ด์ด ๋˜๋Š” ํ•ด์ œ ์ƒํƒœ.
clear๋Š” ๋ธ”๋ก ์š”์†Œ๋กœ ๋˜์–ด์žˆ์–ด์•ผ๋งŒ ๋ถ€๋ชจ ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์ƒ์†๋ฐ›์•„์„œ ํ•ด์ œ๊ฐ€ ๋œ๋‹ค.
span๊ณผ ๊ฐ™์€ ์ธ๋ผ์ธ ์š”์†Œ๋กœ ๋ฐ”๊พผ๋‹ค๋ฉด ์ œ๋Œ€๋กœ ํ•ด์ œ๊ฐ€ ๋˜์ง€ ์•Š์Œ.
๋”ฐ๋ผ์„œ display:block์œผ๋กœ ๋ฐ”๊ฟ”์ค˜์•ผ ํ•œ๋‹ค.

clear๋ผ๋Š” float์„ ํ•ด์ œ์‹œํ‚ค๋Š” ์ „์šฉ ์†์„ฑ์„ ์ด์šฉํ•ด์„œ ๊ฐ€์žฅ ๊น”๋”ํ•˜๊ฒŒ float์„ ํ•ด์ œํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๊ฐ€ ๋“ค์–ด์žˆ์ง€ ์•Š์€ ๋นˆ ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ ํƒœ๊ทธ๋ณ„๋กœ ์˜๋ฏธ๋ฅผ ๊ฐ–๋Š” ์‹œ๋งจํ‹ฑ์ ์ธ ๋งˆํฌ์—…์—์„œ๋Š” ๋ถˆํ•„์š”ํ•œ ์š”์†Œ๊ฐ€ ์ƒ๊ธฐ๋Š”๊ฒƒ์ด๋ฏ€๋กœ ๋ฒˆ์žกํ•˜๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.
๋‹จ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ 5๋ฒˆ์ด ๋“ฑ์žฅ

  1. ๊ฐ€์ƒ์š”์†Œ๋ฅผ ์ด์šฉํ•œ clear์†์„ฑ์„ ์ด์šฉํ•œ ํ•ด์ œ


๋นˆ ํƒœ๊ทธ๊ฐ€ ์˜ค๋Š” ๊ณณ์— after๋ผ๋Š” ๊ฐ€์ƒ์š”์†Œ๊ฐ€ ์ž๋ฆฌ์žก๊ณ  ์žˆ์Œ.
๋˜‘๊ฐ™์ด clear:both๋ผ๋Š” ์†์„ฑ์„ ์ค˜์„œ ํ•ด์ œ๊ฐ€ ๋œ๋‹ค.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>
.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.box_parent:after { /* :after๋ฅผ ์ด์šฉํ•˜์—ฌ ์ธ์ ‘์š”์†Œ๋กœ ๊ตฌ์„ฑํ•˜์—ฌ ํ•ด์ œ */
  display: block;
  /*๋ธ”๋ก ์š”์†Œ๊ฐ€ ํ•„์š”ํ•˜๋ฏ€๋กœ after๋ฅผ ๋ธ”๋ก ์š”์†Œ๋กœ ๋ฐ”๊ฟ”์คŒ*/
  clear: both;
  content: '';
}

๊ฐ€์ƒ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— content๋ผ๋Š” ํ•„์ˆ˜ ์†์„ฑ์ด ๋“ค์–ด๊ฐ€์•ผ ๋˜๋ฏ€๋กœ content์˜ ๊ฐ’์„ ๋นˆ๊ฐ’์œผ๋กœ ์ง€์ •ํ•ด์ฃผ๊ฒŒ๋จ.
๋”ฐ๋ผ์„œ ๋นˆ ํƒœ๊ทธ๋กœ clear ์†์„ฑ์„ ์ค€๊ฒƒ๊ณผ ๋™์ผํ•œ ํšจ๊ณผ๋ฅผ ์ฃผ๋ฉด์„œ ์‹œ๋ฉ˜ํ‹ฑ ๋งˆํฌ์—… ์š”์†Œ์— ๋ฐ˜ํ•˜์ง€ ์•Š๋Š” ํ•ด์ œ ๋ฐฉ๋ฒ•์ด ์™„์„ฑ๋จ.

์ด ํ•ด์ œ๋ฐฉ๋ฒ•์€ overflow:hidden์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฐ™์ด ํŒ์—…๊ณผ ๊ฐ™์€ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ๊ฒฝ์šฐ์—๋„ ๋Œ€์‘์ด ๋˜๊ธฐ ๋–„๋ฌธ์— ์ฝ˜ํ…์ธ ์˜ ๋†’์ด๊ฐ’์ด๋‚˜ ์‚ฌ์ด์ฆˆ์˜ ๋ณ€ํ™”์—๋„ ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์‘๋œ๋‹ค.

๊ฒฐ๋ก 
ํ•ด์ œ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ€์žฅ ๋ณดํŽธ์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜

์ •๋ฆฌ

๊ฐ ํ•ด์ œ๋ฐฉ๋ฒ•์€ ์ƒํ™ฉ๋ณ„๋กœ ํŠน์ง•์„ ์ž˜ ์•Œ๊ณ  ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
overflow๋‚˜ after๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ๋ณดํŽธ์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

์ •๋‹ต์€ ์—†๊ณ  ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘ ์—ฌ๋Ÿฌ ์ƒํ™ฉ์„ ์ •ํ™•ํ•˜๊ฒŒ ํŒŒ์•…ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด
์ž์‹ ์š”์†Œ๋“ค์˜ ํ•ด์ œ๊ฐ€ ๊ตณ์ด ํ•„์š”์—†๋Š” ๋ถ€๋ชจ๊ฐ€ float๋ฅผ ๊ฐ€์ง„ ๋ฐฉ๋ฒ•,
๋†’์ด๊ฐ’์ด ๋‘˜๋‹ค ๊ณ ์ •์ธ ๋ฐฉ๋ฒ•์—์„œ ๋‹ค์–‘ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ถ”๊ฐ€

float์ด ์™œ UI์˜ ์˜ค๋ฅ˜์™€ ๊ฐ™์€ ํ˜„์ƒ์„ ๋ฐœ์ƒํ•˜๊ฒŒ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” overflow์™€ float์ด ๋™์ž‘ํ•˜๋Š” ๊ฐœ๋…์ธ BFC(Block Formatting Context)๊ฐœ๋…์„ ์•Œ์•„์•ผํ•จ

์ด ์ด๋ก ์€ ๋”ฐ๋กœ ๊ณต๋ถ€ํ•ด์•ผํ•  ์ •๋„๋กœ ์‹ฌ๋„์žˆ๊ณ  ์ดํ•ด๋„๊ฐ€ ํ•„์š”ํ•œ ๊ฐœ๋…์ด๊ธฐ ๋–„๋ฌธ์—
Block formatting context
Block formatting context
์ฐธ๊ณ ํ•˜๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€