なぜ、私は右に浮かぶと、背景色が消えますか？

ページの下部に黄色のバーがあり、ソーシャルメディアリンクやその他の細かい詳細があります。私はリンクを右に、細かい部分を左にしたい。なぜ、私は右に浮かぶと、背景色が消えますか？

HTML：

<footer> 
    <div class="one-third"></div> 
    <div class="one-third"></div> 
    <div class="one-third"> 
    <a href="#"><img src="images/facebook.svg" /></a> 
    </div> 
</footer>

はCSS：

footer { 
    width: 100%; 
    background-color: #f5c300; 
} 

.one-third { 
    float:right; 
}

私がこれを書いていたとして、私は.one-第三は、CSSの一部に間違っていることを考え出し、多分それが必要footer a img {...}となります。

更新：私がこれを行ったとしても^まだフッターの背景色を取り除いています。私はその後、フッターにBGの色をimgスタイルで投げたが、それはアイコンの後ろでのみ変更され、フッター全体では変更されなかった。

出典

2016-06-17 Anthony Hulett

@gayathri追加なしコードが必要です。 OPは問題を複製するのに十分なコードを提供しています。 – hungerstar

要素をフローティングすると、現在のドキュメントフローから要素を取り出します。どういう意味ですか？まあ、コンテナ要素が懸念される限り、浮動要素はスペースを取らない。コンテナ要素にスペース（高さ）を占めるコンテンツがない場合、コンテナの高さは0で背景色はありません。浮動要素はスペースを占めませんが、他の要素は「参照」「」を参照してください。

修正方法？フロートをクリアします。最も一般的な方法は、のclearfixを使用することです。 clearfixは通常、CSSクラスです。私はmicro clearfixをNicolas Gallagherによって使用しています。

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
}

<footer class="cf"><!-- floated elements --></footer>

別clearfix溶液はフローティング要素を含む要素にoverflow: hidden;を適用することです。これにはいくつかの欠点があります。これは、親をオーバーフローさせるコンテンツを非表示にしたくない場合があるためです。

footer { 
    width: 100%; 
    background-color: #f5c300; 
    overflow: hidden; 
}

出典

2016-06-17 03:53:08 hungerstar

私はそれをコードとバムに投げました。私はバックカラーを手に入れました！ありがとう。私はclearfixを勉強します！ –

あなたが気に入らなければ、別の質問があります。なぜなら、あなたが押した要素を逆順に並べていくと、それはなぜですか？ページの一番下にアイコンを置いてからinstagramに置きますが、浮かせば、左の代わりに右にある。 –

'float：left;'を使用すると、探している要素の順序に適しているかもしれません。ブラウザはそれらの要素をそのまま浮動小数点に変換します。あなたが右にフロートすると、最初の '.one-third' DIVが右に移動し、2番目の' .one-third' DIVが右に移動し、3番目の.one-third DIVが移動します。効果的に順序を逆転させる。 – hungerstar

こんにちはplunkerを確認してくださいhttps://plnkr.co/edit/Zmp66hXeiYAhS3VUyl8E?p=preview

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Basic plunk!</h1> 

    <!-- Put your html here! --> 
    <div class="footer"> 
        <div class="pull-right"> 
         <ul class="list-icons"> 
           <li> 
            <a href=""> 
             <em class="fa fa-twitter-square"></em> 
            </a> 
           </li> 
           <li> 
            <a href=""> 
             <em class="fa fa-facebook-square"></em> 
            </a> 
           </li> 
           <li> 
            <a href=""> 
             <em class="fa fa-google-plus-square"></em> 
            </a> 
           </li> 
           <li> 
            <a href=""> 
             <em class="fa fa-instagram"></em> 
            </a> 
           </li> 
           <li> 
            <a href=""> 
             <em class="fa fa-flickr"></em> 
            </a> 
           </li> 
           <li> 
            <a href=""> 
             <em class="fa fa-pinterest-square"></em> 
            </a> 
           </li> 
          </ul> 
        </div> 
        <div> 
         <strong>Copyright</strong> Example 
        </div> 
       </div> 
    </body> 

</html>

とCSS

/*ここにあなたのCSSを入れて*/

h1 { 
    color: red; 
} 
.footer { 
    background: none repeat scroll 0 0 yellow; 
    border-top: 1px solid #e7eaec; 
    bottom: 0; 
    left: 0; 
    padding: 10px 20px; 
    position: absolute; 
    right: 0; 
} 
ul 
{ 
    list-style:none 
} 
ul li 
{ 
    float:left; 
    padding-right:20px; 
}

出典

2016-06-17 03:54:57

なぜ、私は右に浮かぶと、背景色が消えますか？

答えて

関連する問題