Wie beeinflusst Float die Hintergrundfarbe?

dies ist mein HTML-CodeWie beeinflusst Float die Hintergrundfarbe?

<html> 
<head> 
<link rel="stylesheet" href="main-pd.css"/> 
</head> 
<body> 
<div class="menu-wrap"> 
<ul class="menu"> 
</ul> 
</div> 
</body> 
</html>

und das ist mein CSS-Code

.menu-wrap{ 
background-color:pink; 
} 
ul{ 
background-color:blue; 
height:100px; 
border:solid; 
width:350; 
float:right; 
}

ohne float: rosae Farbe der Mutter div und im obigen Fall nicht: Rechtsgut den Hintergrund zeigen rosa Hintergrund. Warum passiert es?

Quelle

2016-03-19 k_learner

Es ist nicht der Hintergrund nicht beeinflusst, sondern schweben Elemente haben keinen Einfluss auf die Höhe eines normalen Behälters, so dass es groß 0px zusammenbricht. Siehe [floating stuff in einem div, schwebt außerhalb von div. Warum?] (Http://stackoverflow.com/q/2062258/1529630) – Oriol

Sie müssen verstehen, was FLOAT ist und wie es funktioniert. Wenn Elemente verschoben werden, werden sie aus dem normalen Dokumentfluss entfernt. Sie müssen daher explizit gelöscht werden. Sie befinden sich nicht mehr im übergeordneten Container. Wenn Sie 'clearfix' hacken, erhalten Sie das gewünschte Ergebnis. ** FYI, Float-Elemente werden zum Inline-Block-Element. ** Es wird empfohlen, 'clearfix' hack zu verwenden, wenn Sie floated-Elemente verwenden. –

danke an euch beide :) –

-1

Sie müssen etwas anderes Ihre CSS-Datei haben, die das tut. Ich habe Ihren Code in jfiddle getestet und funktioniert gut. Werfen Sie einen Blick https://jsfiddle.net/max234435/boL8zs4a/

Quelle

2016-03-19 03:26:26 max234435

Da Sie die Breite und Höhe des Eltern div nicht erwähnt hat, also nach float:right in Kind-Element setzen, Eltern auch auf der rechten Seite schweben. Unten finden Sie den Code ein:

.menu-wrap{ 
 
    background-color:pink; 
 
    display:inline-block; 
 
    width: 100%; 
 
    height: 105px; 
 
} 
 
ul{ 
 
    background-color:blue; 
 
    height:100px; 
 
    border:solid; 
 
    width:350px; 
 
    float: right; 
 
    position: relative; 
 
    top: -17px; 
 
}

<div class="menu-wrap"> 
 
    <ul class="menu"> 
 
    </ul> 
 
</div>

Quelle

2016-03-19 03:44:15 hmjha

Wenn ich Ihre Frage richtig verstanden, dann ist dies, was ich vorschlagen:

HTML:

<body> 
    <div class="menu-wrap"> 
    <ul class="menu"> 
    </ul> 
    </div> 
</body>

CSS:

.menu-wrap{ 
    width: 100%; 
    height: 500px; 
    float: left; 
    background-color:pink; 
} 
ul{ 
    width:350px; 
    height:100px; 
    margin: 0; 
    padding: 0; 
    float: right; 
    background-color:blue; 
    border:solid; 
}

OR:

CSS:

.menu-wrap{ 
    height: 500px; 
    position: relative; 
    background-color:pink; 
} 
ul{ 
    width:350px; 
    height:100px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    background-color:blue; 
    border:solid; 
}

Hope this Sie heraus hilft .. auf jeden Fall einen Blick auf Schwimmer und Position einnehmen: relative/position: absolute CSS-Eigenschaften im Detail.

Quelle

2016-03-19 06:02:20

Endlich habe ich den Grund verstanden :) Es ist einfach, weil das Elternelement nichts als Floated-Element enthielt, dessen Höhe zu nichts zusammenbricht. für weitere Informationen siehe: - https://css-tricks.com/all-about-floats/

Quelle

2016-03-19 13:41:41

Wie beeinflusst Float die Hintergrundfarbe?

Antwort

Verwandte Themen