html - 浮動兄弟要素を要素がラップしないようにする

原文 html css

私はコンテンツが浮動兄弟でラップされないようにしたいです(コンテンツの左または右に浮動している可能性があります)。

コンテンツの後にコンテンツがないため、フロートを含む/ベースラインを再調整することは問題外です。コンテンツを「立ち上がって丸まらない」にしたい

これは、コンテンツにoverflow:auto/hiddenを付けることで簡単にできることを知っています。しかし、今回は私はそうすることができません。


コンテンツには、継承された幅の<ul>が含まれ、ボックスシャドウが含まれます-overflow:auto/hiddenがある場合、コンテンツはシャドウをクリップします
コンテンツと同じ幅にする必要があるため、<ul>の側面にパディングを設定できません。
overflow:auto/hiddenを配置するときと同じように、寸法、パディング、マージンを測定単位で明示的に設定してはなりません。これには、ラップがフローティング要素から離れるようにマージンを追加することが含まれますが、これに限定されません。フローティング要素のコンテンツの幅は動的になる場合があります。


私のhtmlとcssはここにあります:http://jsfiddle.net/QQQB5/2/-しかし、これはoverflowを使用して折り返しを防ぎますが、シャドウをクリップします。

overflowを使用することでコンテンツが折り返されないようにする他の方法はありますか？可能な限り、ハッキング、「トリック/チート」はありません。回避できない場合は、追加のマークアップを受け入れます。

答え

コンテンツコンテナでもfloat:leftを使用するだけで問題ありません:)

.content {zoom:1; float:left;}

更新:

2004年から提供されたリンクがFNEを使用していたからといって、今日ではそうではありません。

CSS3では、次のように追加するだけです。

.container:after { 
      content: "";
      display: block;
      clear: both;
 }

そして、あなたはすべてを浮かばない。

関連記事