CSSAnimation
Googleでログイン
問題12：コードを修正して正しく表示しよう3
今回はcssを勉強し始めてすぐに習うfloatの問題です。
要素の中にコンテンツを入れてfloatでコンテンツの配置をデザインしたいなと思った時に、親要素から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¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
解決策の一つは解答の通り、overflowを使って親要素にfloatした子要素の高さを加えてもらうという方法です。overflowにvisible以外の値を入れると子要素の高さを無視しないというルールがあります。