長い時間、float フロートプロパティを使用することで、（ブラウザのサイズが変更されたときに）
ブラウザの幅を埋め、きちんとラップするボックスのグリッドを作成することを受け入れてきました。
しかし、display プロパティのinline-block 値は、これをさらに簡単にします。
inline-block 要素は、インライン要素に似ていますが、幅と高さを持つことができます。
古い方法 - float を使用する
（フロートボックスの後の要素に clear プロパティを指定する必要もあることに注意してください）：
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
}
Try it Yourself ❯
同じ効果は、display プロパティの inline-block 値を使用することによっても得ることができます
（clear プロパティは必要ないことに注意してください）：
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
Try it Yourself ❯