5.15 Objektorientierte Webentwicklung - valentinkoch.de

Abbildung 9: Clear innerhalb eines BFCs… weshalb eine Lücke entstehen kann (rote Linie).Ungewolltes Clear einschränkenMit fester Gesamtbreite:#seite {width: 45em;}#inhalt {float: left;width: 33em;}(siehe float011.php)Ohne feste Breitenangaben ist nur ein Workaround möglich. Hier die Möglichkeiten:1. Nicht inhalt sondern ein div container im Inhaltsbereich bekommt float und width: 100%.(funktioniert nicht, siehe float012.php und Quelle „CSS-Techniken“, S. 112)2. Ein weiteres Element, das alle Inhalte zusammenfasst kann float und width erhalten. (funktioniertnicht, siehe float.013.php und Quelle „CSS-Techniken“, S. 113)3. #seite kann durch Margin, Padding oder Border auf die gewünschte Inhaltsbreite eingeschränktwerden. #inhalt erhält dann float und width: 100%, und die Randspalte bekommt einen negativenMargin. (funktioniert auch nicht, siehe float014.php und Quelle „CSS-Techniken“, S. 113)BFC durch inline-blockDa weder IE noch ältere Gecko-Browser inline-block korrekt unterstützen, kann es seine Stärken in einemanderen Zusammenhang entfalten (siehe 3.7.20)BFC durch overflowAuch hier wird von einer Verwendung abgeraten (overflow erzeugt einen Scrollbalken. Kommt dann nochder Scrollbalken des Browser hinzu, ist die Verwirrung komplett).BFC durch Darstellungseigenschaften von TabellenAuch hier wird von einer Verwendung abgeraten, da die Browser bei unterschiedlichen Inhaltsbreiten inTabellen sehr unterschiedlich reagieren.3.7.19.7 Floats durch BFC einschließenAlle Elemente, die einen BFC erzeugen, schließen Floats ein. Die in Abschnitt 3.7.19.6 gezeigten Methodenfür Containing Floats sind umfassen erprobt und zuverlässig anwendbar.