回答編集履歴

2 clearfixのつけ方

yamato_hikawa

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

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」
}
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る