質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1994閲覧

overflow:hiddenとwidth1000pxの動作について

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/21 07:54

以下htmlで、

overflow:hidden部分をコメントアウトを解除すると、
image-block_left部分の背景が囲っている要素下まできますが、

overflow:hidden部分をコメントアウトをすると、
image-block_left部分の背景が囲っている要素の半分位までになります。

左右にfloatした親要素にoverflow:hiddenを設定すると
要素下までにくるという理解でよいでしょうか。

あと、もう1点
width:1000px部分をコメントアウト解除すると、
ウィンドウを狭くしていくと、カラムオチ?ずれます。

一方、width:1000px部分をコメントアウトをし、
ウィンドウを狭くしていくと、カラムオチしません。ずれません。

こちらはどういった仕組みのためなのでしょうか。

html

1<html> 2<body> 3 <style> 4 body { 5 margin: 0; 6 padding: 0; 7 } 8 /* 要素配置のスタイル */ 9 .image-block { 10 padding: 150px 0; 11 /*overflow: hidden;*/ 12 } 13 .image-block_left { 14 background: #ecf0f1; 15 } 16 .image-block_right { 17 background: #cfe9fa; 18 } 19 .image-block_inner { 20 /*width: 1000px;*/ 21 margin: 0 auto; 22 } 23 .image-block_img { 24 25 } 26 .image-block_left .image-block_img { 27 float: left; 28 } 29 .image-block_right .image-block_img { 30 float: right; 31 } 32 .image-block_text { 33 width: 500px; 34 } 35 .image-block_left .image-block_text { 36 float: right; 37 } 38 .image-block_right .image-block_text { 39 float: left; 40 } 41 .image-block_ttl { 42 color: #3498DB; 43 font-size: 32px; 44 margin-bottom: 20px; 45 } 46 .image-block_description { 47 line-height: 1.8; 48 } 49 </style> 50 <div class="image-block image-block_left"> 51 <div class="image-block_inner"> 52 <div class="image-block_img"> 53 <img src="./img01.jpg" width="450" alt="" class="animation-scrollUp" /> 54 </div> 55 <div class="image-block_text"> 56 <p class="image-block_ttl animation-scrollUp">キャッチコピー的なテキスト</p> 57 <p class="image-block_description animation-scrollUp">キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。<br /> 58 キャッチコピーに対する説明文が入ります。キャッチコピーに対する説明文が入ります。</p> 59 </div> 60 </div> 61 </div> 62</body> 63</html> 64

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

基本的にhtmlの表示は親要素の中に子要素が入っているのですが、floatは名前のとおり、要素を浮かせて左右に配置するプロパティで、親要素は浮いた子要素を認識できず、高さが0になります。

なので記述されたhtmlだと、.image-blockpadding: 150px 0;があるため、高さ300pxだけ背景色が効いて、.image-block_innerは子要素を認識できず高さは0に、その子要素は親要素からはみ出た状態になっています。
これは、それぞれの要素にborderを指定するとわかりやすくなります。

で、親要素にfloatした子要素を認識せる方法としてはいくつか方法があるのですが、親要素にoverflow:hiddenを記述するのも方法の一つです。他の方法は下記URLよりどうぞ。

html floatの基本 高さを認識させる - Qiita

なので、

左右にfloatした親要素にoverflow:hiddenを設定すると

要素下までにくるという理解でよいでしょうか。

というのは、要素下までというより、親要素が子要素を認識してくれるみたいな理解の仕方がいいと思います。

次の質問の、

width:1000px部分をコメントアウト解除すると、

ウィンドウを狭くしていくと、カラムオチ?ずれます。

一方、width:1000px部分をコメントアウトをし、

ウィンドウを狭くしていくと、カラムオチしません。ずれません。

は逆ではないでしょうか?
width: 1000px;を親要素に指定すると、子要素で指定されたfloatは、親要素の中でそれぞれ左寄せ、右寄せとなるため、ブラウザのウィンドウを狭めていっても、親要素の幅は常に1000pxなのでずれません。

width: 1000px;をコメントアウトすると、親要素の.image-block_innerにも、その親要素の.image-blockも幅の指定がないので、floatを指定した要素はブラウザのウィンドウサイズに合わせてそれぞれ左寄せと右寄せになります。
なので.image-block_img.image-block_textの合計の幅よりもウィンドウサイズが狭くなると、カラム落ちしてしまいます。
ちなみに、width: 1000px;ではなく、width: 600px;としても子要素のそれぞれの幅の合計よりも狭いので、カラム落ちしてしまいます。

投稿2017/07/24 02:51

編集2017/07/24 02:52
kulvon

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/07 03:22

ありがとうございました! 勉強になります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問