ログイン

問題12 コードを修正しよう3

CSSAnimationの問題

CSSAnimation

コードを修正しよう3

問題

今回はcssを勉強し始めてすぐに習うfloatの問題です。
要素の中にコンテンツを入れてfloatでコンテンツの配置をデザインしたいなと思った時に、親要素からfloatしたコンテンツが抜けたように高さなどがなくなってしまいました。どうしてでしょうか。

自分の環境に書くコード

              <div class="box">
  <div class="content1 content">コンテンツ1</div>
  <div class="content2 content">コンテンツ2</div>
  <div class="content3 content">コンテンツ3</div>
</div>
¥HTML¥
            
              .box{
  background-color: #dddddd;
  width: 400px;
  padding: 50px;
}
.content{
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  float: right;
}
.content1{
  background-color: brown;
}
.content2{
  background-color: cadetblue;
}
.content3{
  background-color: burlywood;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              .box{
  overflow:auto;
}
¥CSS¥
            
答えのアイコン

解説

floatはその名の通り適用した要素を浮かせてしまいます。そのため、親要素の中には存在しているのですが、高さなどは無視されてしまいます。
解決策の一つは解答の通り、overflowを使って親要素にfloatした子要素の高さを加えてもらうという方法です。overflowにvisible以外の値を入れると子要素の高さを無視しないというルールがあります。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!