CSS float 자식들 포함하기

1 개요

CSS float 자식들 포함하기

2 문제상황

<style>
.left { float: left; }
.right { float: right; }
#main {
  background: pink;
}
</style>

<div id="main">
  <div class="left">Left1</div>
  <div class="left">Left2</div>
  <div class="right">Right1</div>
</div>

3 방법1: overflow

<style>
.left { float: left; }
.right { float: right; }
#main {
  background: pink;
  overflow: auto;
}
</style>

<div id="main">
  <div class="left">Left1</div>
  <div class="left">Left2</div>
  <div class="right">Right1</div>
</div>

4 방법2: display: list-item

<style>
.left { float: left; }
.right { float: right; }
#main {
  background: pink;
  display: list-item;
}
</style>

<div id="main">
  <div class="left">Left1</div>
  <div class="left">Left2</div>
  <div class="right">Right1</div>
</div>

5 방법3: display: flow-root

<style>
.left { float: left; }
.right { float: right; }
#main {
  background: pink;
  display: flow-root;
}
</style>

<div id="main">
  <div class="left">Left1</div>
  <div class="left">Left2</div>
  <div class="right">Right1</div>
</div>

6 같이 보기

• 같이보기
• 같이보기
• 같이보기
• 같이보기

7 참고

• 위키백과 "CSS float 자식들 포함하기"
• 위키낱말사전 "CSS float 자식들 포함하기"
• 다음사전 "CSS float 자식들 포함하기"
• 다음백과 "CSS float 자식들 포함하기"
• 네이버사전 "CSS float 자식들 포함하기"
• 네이버백과 "CSS float 자식들 포함하기"