【CSS】floatでの回り込みが効かない

回答率: 85.48%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ float(CSS)に関する質問

Q&A

解決済

3回答

10258閲覧

【CSS】floatでの回り込みが効かない

総合スコア10

0グッド

0クリップ

投稿2019/02/21 04:32

編集2019/02/21 04:37

0

0

前提・実現したいこと

HTML/CSSでfloatを使ってレイアウトを組んでいます。
作成したカラーボックスを隙間なく並べたいです。

発生している問題・エラーメッセージ

クラスbox-righttop-right(画像#ff9e6b)がうまくbox-righttop-left(画像#dbd400,#0093b7)横に回りこんでくれません。

該当のソースコード

HTML
1<body>
2<div class="wrapper">
3  <header>
4    <div class="box-top">
5      <p>#141f40</p>
6    </div>
7  </header>
8
9  <main>
10    <div class="clearfix">
11      <div class="box-left">
12        <p>#80bfa8</p>
13      </div>
14        <div class="box-right">
15          <div class="clearfix">
16            <div class="box-righttop">
17              <div class="box-righttop-left">
18                <div class="box-righttop-left-yellow">
19                  <p>#dbd400</p>
20                </div>
21                <div class="box-righttop-left-blue">
22                  <p>#0093b7</p>
23                </div>
24              </div>
25              <div class="box-righttop-right">
26                <p>#ff9e6b</p>
27              </div>
28            </div>
29          </div>
30          <div class="box-rightbottom">
31            <p>#8c2727</p>
32          </div>
33      </div>
34    </div>
35  </main>
36  <footer>
37    <div class="box-bottom">
38      <p>#d98d30</p>
39    </div>
40  </footer>
41</div>
42</body>
43

CSS
1.wrapper{
2  width: 400px;
3  margin: auto;
4}
5
6.box-top{
7  width: 400px;
8  height: 100px;
9  background-color: #141f40;
10}
11
12.box-left{
13  width: 150px;
14  height: 250px;
15  background-color: #80bfa8;
16  float: left;
17}
18
19.box-right{
20  width: 250px;
21  height: 250px;
22  float: right;
23}
24
25.box-righttop-left{
26  width: 250px;
27  height: 150px;
28  float: left;
29}
30
31.box-righttop-left-yellow{
32  width: 150px;
33  height: 50px;
34  background-color: #dbd400;
35  float: left;
36}
37
38.box-righttop-left-blue{
39  width: 150px;
40  height: 100px;
41  background-color: #0093b7;
42  float: left;
43}
44
45.box-righttop-right{
46  width: 100px;
47  height: 150px;
48  background-color: #ff9e6b;
49  float: right;
50}
51
52.box-rightbottom{
53  width: 250px;
54  height: 100px;
55  background-color: #8c2727;
56}
57
58.box-bottom{
59  width: 400px;
60  height: 100px;
61  background-color: #d98d30;
62}
63
64.clearfix:after {
65  display: block;
66  content: "";
67  clear: both;
68}
69
70p{
71  color: #fff;
72  font-size: 3px;
73  padding: 3px;
74}
75

試したこと

wrapperのwidthを超えないよう数値調整
clearfixの分割
overflow: hidden;

2019/02/21 04:34

「初心者」というのは質問者さんの状態であって質問そのものの要件ではありませんので質問に「初心者アイコン」をつけるにとどめてください(質問は編集できます)

2019/02/21 04:37

ご指摘ありがとうございます。初心者アイコンをつけ、内容を変更させていただきました。

行動規範の内容に同意します

回答3件

0

CSS
1.wrapper{
2  width: 400px;
3  margin: auto;
4}
5
6.box-top{
7  width: 400px;
8  height: 100px;
9  background-color: #141f40;
10}
11
12.box-left{
13  width: 150px;
14  height: 250px;
15  background-color: #80bfa8;
16  float: left;
17}
18
19.box-right{
20  width: 250px;
21  height: 250px;
22  float: right;
23}
24
25.box-righttop-left{
26  width: 100px; /*サイズ変更*/
27  height: 150px;
28  float: left;
29}
30
31.box-righttop-left-yellow{
32  width: 150px;
33  height: 50px;
34  background-color: #dbd400;
35  float: left;
36}
37
38.box-righttop-left-blue{
39  width: 150px;
40  height: 100px;
41  background-color: #0093b7;
42  float: left;
43}
44
45.box-righttop-right{
46  width: 100px;
47  height: 150px;
48  background-color: #ff9e6b;
49  float: right;
50}
51
52.box-rightbottom{
53  width: 250px;
54  height: 100px;
55  background-color: #8c2727;
56}
57
58.box-bottom{
59  width: 400px;
60  height: 100px;
61  background-color: #d98d30;
62}
63
64.clearfix:after {
65  display: block;
66  content: "";
67  clear: both;
68}
69
70p{
71  color: #fff;
72  font-size: 3px;
73  padding: 3px;
74  margin:0px; /*隙間削除*/
75}

Divタグが250pxで横幅いっぱい使っているせいで、
次のDivタグが物理的に入らない状態になっているだけでしたよ。

グーグルのディベロッパーツール（F12を押すとでてくるやつ）を使うと状態の確認が簡単なのでおすすめです

投稿2019/02/21 04:42

編集2019/02/21 04:43

総合スコア2341

2019/02/21 05:01

ご回答ありがとうございます。なるほど、widthが広がりすぎていただけだったのですね。。数値調整する箇所を間違えていました。デベロッパーツールも活用しつつ精進いたします。ありがとうございました。

行動規範の内容に同意します

0

ベストアンサー

そういう時は何が邪魔をしているかブラウザ開発ツールで確認しましょう。

気になったのは2箇所。

1個目：
.box-righttop-leftの横幅が長い。

端っこまで突き抜けてますよね。

2個目：
pのmargin

分かりづらいかもしれませんが、特に上ははみ出てます。
pはブロック要素であるため、ちょっとだけpaddingとmarginをデフォルトで持ってます。

個別にmarginを0にしても良いですが、
ブラウザ依存にもよるところにもなるので、リセットCSSを導入したうえで調整した方が良いかもしれません。

適当に調整した結果：

※調整したのは.box-righttop-leftのwidth,pのmarginだけです。

蛇足：
flexBox使えばもっとスッキリ書けるかもしれませんね・・・。私は使いこなせてませんが。

投稿2019/02/21 04:52

総合スコア80850

2019/02/21 05:03

なるほど！デベロッパーツールの使い方から問題点まで示してくださり、スッキリ理解することができました。 flexBoxも使ってみます。ご丁寧なご回答、大変感謝です！

2019/02/21 05:07

解決されたようで何よりです。デベロッパツールはツール上で直接編集できて実際のファイルには影響ないので微調整にはもってこいです。

行動規範の内容に同意します

0

CSS
1.box-righttop-left{
2  width: 250px;
3  height: 150px;
4  float: left;
5}

これは、width: 150px;の間違いではないですか？

投稿2019/02/21 04:42

総合スコア36074

2019/02/21 04:55

中にもブロックあるからwidthをautoとかなしにしない限り、150px以下なら0とかでもいい感じですね。

2019/02/21 05:02

おっしゃる通りでした。こんなに初歩的な質問にご回答くださり、ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

関連した質問

トップ float(CSS)に関する質問

【CSS】floatでの回り込みが効かない

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る