前回に引き続き、今回はfloatプロパティを利用した実用度の高いボックスの配置の実現方法を解説します。 練習用HTML floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば、その手法はあらゆる要素に適用でき、また、配置された各ボックスがどのような内容を持とうともレイアウトには影響しないからです。 サンプルとなるHTMLは以下の通りです。 HTMLソース <div id="box-A"> <div id="box-B"> B </div> <div id="box-C"> C </div> <div id="box-D"> D </div> </div> CSSを個別に指定できるように、各要素にはid(#box-AからD)を振りました。解説ではid名ではなく、単にボックスA, ボックスB...と呼ばせていただきます。
![第4回 実践 floatプロパティの学習法 | gihyo.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/40c004b748567dad793630ee1223515c400862ba/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2008%2F286_wsd.png)