ログイン

問題27 floatを使おう

HTML_CSSの問題

HTML_CSS

floatは、少しばかり癖のあるプロパティなので初心者には少し難易度が高めです。 ですがコツさえ掴んでしまえば、そこまで難しくないので身構えず覚えていきましょう!

floatを使おう

問題

floatを上手く使って見本のような配置にしましょう。

自分の環境に書くコード

              <section>
    <div class="box box--red"></div>
    <div class="box box--blue"></div>
    <div class="box box--green"></div>
</section>
<section>
    <div class="box box--red"></div>
    <div class="box box--blue"></div>
    <div class="box box--green"></div>
</section>
¥HTML¥
            
              section {
    width: 1000px;
    margin-bottom: 30px;
}
.box {
    width: 200px;
}
.box--red {
    height: 100px;
    background-color: red;
}
.box--blue {
    height: 200px;
    background-color: blue;
}
.box--green {
    height: 300px;
    background-color: green;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              <section>
  <div class="box box--red"></div>
  <div class="box box--blue"></div>
  <div class="box box--green"></div>
</section>
<section>
  <div class="box box--red"></div>
  <div class="box box--blue"></div>
  <div class="box box--green"></div>
</section>
¥HTML¥
            
              section {
    width: 1000px;
    margin-bottom: 30px;
    overflow: hidden;
}
section + section > .box.box--green {
    float: right;
}
.box {
    width: 200px;
    float: left;
}
.box--red {
    height: 100px;
    background-color: red;
}
.box--blue {
    height: 200px;
    background-color: blue;
}
.box--green {
    height: 300px;
    background-color: green;
}
¥CSS¥
            
答えのアイコン

解説

floatを使用する際に気をつけることは
要素が浮いた状態(position:absoluteの様な状態)になってしまうので

親要素にoverflow: hidden;をかけてあげて浮遊を解除する必要があります。

ちなみに2段目の緑の要素にのみfloat: right;をかけております。

clear: both;などを使って解除するやり方などfloatにはtips(小技)が多いですが、あまり使用する機会がないので親要素にoverflow: hidden;と覚えておけばいいでしょう。
ログインして解答を見る
floatプロパティは、float(浮動する)の言葉通り、要素を浮かせて移動させるという特徴を持ったプロパティです。
floatは、よく学習サイトでは横並びにするための要素だと説明がありますが、実際には思うようにレイアウトが組めないという場合があります。

ポイントはfloatを使って浮遊させた状態を、解除する方法も知っておくことです。
floatを解除する方法は3つあり、要素に対しclear:bothを使用する方法、clearfixを使用する方法、親要素に対しover:flowを使用する方法があります。
floatは要素の回り込みが特殊なのでこれらの方法を駆使して対処ができるようになれば、マスターしたと言えるでしょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!