Weird float clear issue

Question

Mam ładny podstawowy układ pływającego elementu div dla lewej kolumny kontenera menu i pełnowymiarowej niewypowierzchnionej jednostki div z lewym marginesem dla obszaru zawartości.

Po umieszczeniu pływającego elementu div w obszarze zawartości, unoszą się i umieszczają zgodnie z oczekiwaniami, aż do wyczyszczenia pływaka.

Kolejna linia pływaków wtedy nie pojawia się bezpośrednio pod poprzedniej linii, ale w dół poniżej dolnej części kolumny menu

Jak widać poniżej nie ma nic szczególnego w tym układzie, ale pływak problem doprowadza mnie do szału :)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;"> 
    floated left div 
</div> 
<div style="margin-left: 210px; border: 1px solid blue;"> 
    non floated right div containing floated divs inside<br /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
</div> 

Zrobiłem jsfiddle, aby zademonstrować problem; http://jsfiddle.net/jP6e9/

Answer 1

Właściwość clear przesuwa elementy za float w określonym kierunku. Z powodu clear: left elementy te są przesuwane w dół za dużym pływającym pudełkiem. Właściwość 'clear' nie uwzględnia elementów pływających wewnątrz samego elementu ani w innym block formatting contexts.

można łatwo utworzyć nowy kontekst formatowania blokowego ustawiając overflow: hidden na szerszym polu: http://jsfiddle.net/ExplosionPIlls/jP6e9/7/

Answer 2

To dlatego, że stworzył pływak z bocznymdiv, ale nie unoszą się głównydiv. Wystarczy to główny div w swoim float usunąć ten masywny margin-left i zastąpić go czymś nieco bardziej konserwatywna:

<div style="margin-left: 20px; border: 1px solid blue; float: left"> 

Wreszcie, jasne że pływak:

<div style="clear: left"></div> 

Aktualizacja:

http://jsfiddle.net/jP6e9/1/

Answer 3

To jedna z tych dziwnych sytuacji gdzie trzeba użyć overflow:auto, aby uzyskać to, co chcesz.

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;"> 

jsFiddle example

Trzeba wyzwolić block formatting context za pomocą właściwości przepełnienie w połączeniu z właściwością pływaka.

Zobacz także: http://www.w3.org/TR/CSS21/visuren.html#block-formatting, http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ i How does the CSS Block Formatting Context work?, aby uzyskać dobre informacje o kontekście formatowania bloków.

Answer 4

można użyć display: table-cell dla prawego div, na przykład:

<div class="left">floated left div</div> 
<div class="right"> 
    non floated right div containing floated divs inside <br /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
</div> 

css code:

.left { 
    float: left; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    margin-right: 10px; 
} 
.right { 
    border: 1px solid blue; 
    display: table-cell; 
} 
.floatItem { 
    float: left; 
    border: 1px solid green; 
} 

proszę zobaczyć deom.

Answer 5

Float none zatrzymuje element, aby zatrzymać owijanie wokół sąsiedniego pływającego clild. Domyślnie wszystkie elementy nie zawierają żadnego. Wyczyść oba elementy stop, aby owijały się wokół pływającego dziecka z lewej lub prawej strony. Aby uzyskać więcej informacji i przykładów na żywo, odwiedź mój samouczek,
http://tutorial.techaltum.com/css_float.html.