<h1>float의 경우</h1>
<div class="float-box">
  <div>float 이용 박스</div>
</div>
<div class="float-box">
  <div>float 이용 박스</div>
</div>
<div class="float-after-box">다음줄로 표시되기 위해서는 해당 요소에 "clear: left" 필요</div>
<h1>inline-block의 경우</h1>
<div class="inline_block-box">
  <div>inline-block 이용 박스</div>
</div>
<div class="inline_block-box">
  <div>inline-block 이용 박스</div>
</div>
<div class="inline_block-after-box">다음줄로 표시되기 위해 "clear"를 따로 사용하지 않아도 됨</div>
.float-box {
  float: left;
  width: 200px;
  height: 70px;
  margin: 5px;
  border: 3px solid skyblue;
  color: blue;
  padding: 10px;
}
.inline_block-box {
  display: inline-block;
  width: 200px;
  height: 70px;
  margin: 5px;
  border: 3px solid skyblue;
  color: blue;
  padding: 10px;
}
.float-after-box {
  clear: left;
  margin: 5px;
  border: 3px solid orange;
  color: red;
  padding: 5px;
}

.inline_block-after-box {
  margin: 5px;
  border: 3px solid orange;
  color: red;
  padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.