私はこれを理解しようとしているが、運...float：left ...の要素を含むラッパーの横に表示されるdiv？
私の問題ました：
私はwrapperがfloatleft divをラップしている3つのdivを、wrapper、floatleftとnormal
を持っており、 normalはラッパーの外にあり、スタイリングなしで完全に通常のdivです。
問題は、normal divは、wrapperの下に表示されるのではなく、左divsの隣に表示されます...なぜですか？
コード/例：http://jsfiddle.net/kaAjW/3969/
ずっと使用.clearfix
に感謝すべてのヘルプ。
常に指定されたfloatの要素をクリアする必要があります。
clearfixクラスを定義し、ラッパーで呼び出します。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class='wrapper clearfix'>
コンテナラッパーの使用overflow:hiddenやラッパーが、それは高さと幅を持っていないだけでフロートが含まれている場合、問題はフロート要素であるhttp://jsfiddle.net/kaAjW/3976/
をハックclearfixなぜなら、あなたがDOMを見れば、浮動要素はスペースを占有しないので、ラッパーは0幅と0高さを持つことになります。あなたはclearfixソリューションを探す必要があります、それをgoogleして、あなたはcss clearfixソリューションの多くの例を見つけることができます。これを使って、wrapper divにclearfixクラスを配置し、浮動divのサイズにします。ラッパーの
使用float:leftとこれが最も簡単な修正ですそれをwidth:100%
.wrapper{
width: 100%;
float:left;
}
を与えます。 bootstrapを探してみることをお勧めします。
floatプロパティは、要素をfloatにする必要があるかどうかを指定します。 clearプロパティはフローティング要素の動作を制御するために使用されます。これをチェックしてくださいdemo