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

以下htmlで、

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

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

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

あと、もう１点
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

回答1件

ベストアンサー

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

なので記述されたhtmlだと、.image-blockのpadding: 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