回答編集履歴

2 clearfixのつけ方

yamato_hikawa score 2004

2016/02/07 07:51  投稿

ひとまず綴り間違いと設定間違いが散見されるので、clearfix箇所の設定の確認と

「dispray」→「display」への置換をしましょう。

下記で挙げているのは一例で、ほかにもありました。

```CSS

#content_view_2:after{

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

#sidebar_view_left,#sidebar_view_left_3:after{

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

#sidebar_view_right,#sidebar_view_right_3{ ←疑似要素の:afterが抜けている

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

```

clearfixのつけ方が間違っていました。

floatさせる要素の親タグにつけます。

全ての箇所がそういう関係になるよう、設定を修正してください。

```HTML

<div class="wrap">

<div class="box">box</div>

<div class="box">box</div>

<div>

```

```CSS

.wrap:after {

content: "";

display: block;

clear: both;

}

.box {

float: left;

}

```

1 追記

yamato_hikawa score 2004

2016/02/06 20:00  投稿

ひとまず綴り間違いと設定間違いが散見されるので、clearfix箇所の設定の確認と

「dispray」→「display」への置換をしましょう。

下記で挙げているのは一例で、ほかにもありました。

```CSS

#content_view_2:after{

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

#sidebar_view_left,#sidebar_view_left_3:after{

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

#sidebar_view_right,#sidebar_view_right_3{ ←疑似要素の:afterが抜けている

clear: both;

content: '';

dispray: block; ←綴り間違い「display」

}

```