CSS の "float" プロパティについて、いつも私を混乱させてきたことがあります。フロートさせたい要素の直前の要素に「float」属性が適用されるのはなぜですか?
質問を視覚化するために、次の jsFiddle http://jsfiddle.net/Ubutb/12/を作成しました。
<div>この例では、コンテンツではなくナビゲーションに float 属性が適用されています<div>。<div>「コンテンツ」要素は、ページの通常のフローから「フロート」したいアイテムであるため、フロートを適用する必要があると考えていました。私は明らかに何かが欠けています。誰かが私が理解しているよりもうまく説明できますか? ありがとう。
CSSを使用する場合、float: {position}その要素に「親要素の{position}側にフロートする」ように指示します。divコンテンツのものは、他の要素の邪魔にならないようにフロートするように指示したナビゲーションであるため、ナビゲーションがそこにさえないかのように通常どおりに動作しています。
"float:left;"div が親の「左の壁」を押していることを意味し<div>ます。次の"float:left;"div が同じコンテナーに追加されると、左に押し出され、最初の div の「右の壁」に当たります。 .. パズルのように。
コンテナーの幅によって、2 番目の"float:left;"div が最初の div の横に配置するのに十分なスペースがあるか、または下に配置されるかが決まります。
ほとんどの場合、各 div の幅が 33% でマージンがなく、きれいな線で終わる場合、3 つの div をコンテナー内に残すことができます。しかし、幅が 34% の場合、1 つが下に移動します..
これがフローティング div の最も簡単な説明です。もちろん、フロート ライトの場合はその逆です。
フロートがなぜそのように機能するのかについての良い説明を探しているようですね。ここにいくつかの良い記事があります：
私自身の説明： floated要素は確かにfloating要素です。その隣の要素は、「ラッピング」と呼ばれるものを実行しています。
これは、あなたの望むことですか？jsfiddle
フローティング位置は、「コンテナ」、別名「親」を基準にしています（この場合、コンテナがない場合、後者は全身です）