CSS float 자식들 포함하기

1 개요[ | ]

force a div to contain floated child divs
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: auto[ | ]

<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 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}