it-swarm.com.de

Relative Position, Schwimmer entzieht sich dem normalen Durchfluss

Wie kann ich verhindern, dass der Div aus dem normalen Fluss genommen wird, aber immer noch Float verwendet wird, wie folgt:

<div id="one">
    <div id="two"></div>
</div>

CSS:

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

Jetzt hat div "one" keine Höhe und div "two" sieht einfach so aus, als wäre es nicht in der ersten Div.

10
Emir Dupovac

Ahh, das Einsturzproblem. Es gibt einen ausgezeichneten Artikel über Floats hier http://css-tricks.com/all-about-floats/ In Ihrem Fall würde ich hinzufügen

overflow: auto

zu #one

Die relativen Informationen sind unten angegeben:

Techniken zum Löschen von Floats

Wenn Sie sich in einer Situation befinden, in der Sie immer wissen, wie das nachfolgende Element aussehen wird, können Sie das Folgende anwenden: beides; Nutzen Sie dieses Element und gehen Sie Ihrem Geschäft nach. Dies ist ideal, da es keine ausgefallenen Hacks und keine zusätzlichen Elemente erfordert, die es perfekt semantisch machen. Natürlich funktionieren die Dinge normalerweise nicht so und wir brauchen mehr Float-Clearing-Werkzeuge in unserer Toolbox.

Die leere Div-Methode ist buchstäblich eine leere Div. <div style="clear: both;"></div>. Manchmal wird ein <br /> -Element oder ein anderes zufälliges Element verwendet, aber div ist das am häufigsten verwendete Element, da es kein Browser-Standard-Styling hat, keine spezielle Funktion hat und mit CSS wahrscheinlich nicht generisch formatiert wird. Diese Methode wird von semantischen Puristen verachtet, da ihre Anwesenheit für die Seite überhaupt keine kontextuelle Bedeutung hat und nur zur Darstellung dient. Natürlich im strengsten Sinne haben sie Recht, aber es erledigt die Arbeit richtig und verletzt niemanden.

Die Überlaufmethode basiert auf dem Festlegen der CSS-Überlaufeigenschaft für ein übergeordnetes Element. Wenn diese Eigenschaft für das übergeordnete Element auf "auto" oder "hidden" festgelegt ist, wird das übergeordnete Element erweitert, um die Gleitkommazahlen zu enthalten, wodurch es für nachfolgende Elemente gelöscht wird. Diese Methode kann sehr schön semantisch sein, da möglicherweise keine zusätzlichen Elemente erforderlich sind. Wenn Sie jedoch feststellen, dass Sie ein neues div hinzufügen, nur um dieses anzuwenden, ist es genauso unsemant wie die leere div-Methode und weniger anpassungsfähig. Beachten Sie auch, dass die Überlaufeigenschaft nicht speziell zum Löschen von Floats dient. Achten Sie darauf, keine Inhalte auszublenden oder unerwünschte Bildlaufleisten auszulösen.

Die Easy Clearing-Methode verwendet einen cleveren CSS-Pseudo-Selektor (:after), um Floats zu löschen. Anstatt den Überlauf für das übergeordnete Element festzulegen, wenden Sie eine zusätzliche Klasse wie "clearfix" an. Dann wende dieses CSS an:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Dadurch wird nach dem übergeordneten Element, das den Gleitkommawert löscht, ein kleiner Teil des Inhalts angewendet, der nicht mehr sichtbar ist. Dies ist nicht die ganze Geschichte, da für ältere Browser zusätzlicher Code verwendet werden muss.

21
Barbara Laird

Dies sollte Ihr Problem lösen. Versuchen Sie es zu beiden Divs hinzuzufügen:

** Zum Testen möchten Sie möglicherweise eine Hintergrundfarbe hinzufügen.

jsFiddle Beispiel hier!

position: relative;
float: left;
clear: none;
display: block;
0
Borsn

Du siehst, wie dein Tauchgang zusammenbricht. Das Hinzufügen eines Überlaufwerts zum CSS für dieses Element sollte dieses Problem beheben.

0
Meximize