Powiedz, że masz div, nadaj temu określony widthi umieść w nim elementy, w moim przypadku jeszcze imgjedno div.

Chodzi o to, że zawartość pojemnika divspowoduje jego divrozciągnięcie i będzie tłem dla zawartości. Ale kiedy to robię, zawierające się divkurczą się, aby dopasować się do obiektów nie pływających, a obiekty pływające będą albo całkowicie wysunięte, albo w połowie wysunięte, w połowie, i nie będą miały żadnego wpływu na wielkość dużego div.

Dlaczego to? Czy brakuje mi czegoś i jak mogę uzyskać pływające przedmioty, aby wyciągnęły się heightz zawartości div?

Najłatwiej jest nałożyć overflow:hiddendiv rodzica i nie określać wysokości:

#parent { overflow: hidden }

Innym sposobem jest także przeniesienie div rodzica:

#parent { float: left; width: 100% }

Inny sposób wykorzystuje wyraźny element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

Powód

Problem polega na tym, że elementy pływające są poza przepływem :

Element jest wywoływany z przepływu, jeśli jest pływający, pozycjonowany absolutnie lub jest elementem głównym.

Dlatego nie wpływają one na otaczające elementy, jak miałby to wpływ element dopływowy .

Jest to wyjaśnione w 9.5 Floats :

Ponieważ liczba zmiennoprzecinkowa nie znajduje się w przepływie, niepozycjonowane pola bloków utworzone przed i za zmiennoprzecinkową pływają pionowo, tak jakby zmiennoprzecinkowa nie istniała. Jednak bieżące i kolejne pola liniowe utworzone obok pływaka są w razie potrzeby skracane, aby zrobić miejsce dla pola marginesu pływaka.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

Jest to również określone w 10.6 Obliczanie wysokości i marginesów . Dla „normalnych” klocków ,

Uwzględniane są tylko dzieci w normalnym przepływie (tzn. Pola pływające i pola absolutnie pozycjonowane są ignorowane […])

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Hacky rozwiązanie: rozliczenie

Sposobem na rozwiązanie tego problemu jest wymuszenie umieszczenia elementu przepływowego pod wszystkimi pływakami. Następnie wysokość rodzica wzrośnie, aby owinąć ten element (a tym samym również elementy pływające).

Można to osiągnąć za pomocą clearwłaściwości :

Ta właściwość wskazuje, które boki pola elementu nie mogą przylegać do wcześniejszego pola swobodnego.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

Rozwiązaniem jest więc dodanie pustego elementu clear: bothjako ostatniego rodzeństwa elementów pływających

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

Nie jest to jednak semantyczne. Lepiej więc wygeneruj pseudoelement na końcu elementu nadrzędnego:

.clearfix::after {
  clear: both;
  display: block;
}

Istnieje wiele wariantów tego podejścia, np. Użycie przestarzałej składni pojedynczego dwukropka :afterdo obsługi starych przeglądarek lub użycie innych wyświetlaczy na poziomie bloku, takich jak display: table.

Rozwiązanie: Korzenie BFC

Istnieje wyjątek od problematycznego zachowania zdefiniowanego na początku: jeśli element bloku ustanawia kontekst formatowania bloku (jest katalogiem głównym BFC), wówczas również zawinie swoją swobodną zawartość.

Zgodnie z 10.6.7 wysokości „Auto” dla kontekstowych katalogów formatowania bloku ,

Jeśli element ma pływających potomków, których dolna krawędź marginesu znajduje się poniżej dolnej krawędzi zawartości elementu, wówczas wysokość jest zwiększana, aby uwzględnić te krawędzie.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Dodatkowo, jak wyjaśniono 9.5 Floats , korzenie BFC są również przydatne z następujących powodów:

Obramowanie tabeli, element zastępowany na poziomie bloku lub element w normalnym przepływie, który ustanawia nowy kontekst formatowania bloku […] nie może nakładać się na pole marginesu dowolnych elementów pływających w tym samym kontekście formatowania bloku, co sam element .

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

Kontekst formatowania bloku jest tworzony przez

• Blokuj skrzynki overflowinnymi niż visible, nphidden

  .bfc-root {
    overflow: hidden;
    /* display: block; */
  }

• Blokuj kontenery, które nie są blokami: kiedy displayjest ustawiony na inline-block, table-celllub table-caption.

  .bfc-root {
    display: inline-block;
  }

• Elementy pływające: kiedy floatjest ustawiony na leftlub right.

  .bfc-root {
    float: left;
  }

• Elementy absolutnie pozycjonowane: kiedy positionjest ustawiony na absolutelub fixed.

  .bfc-root {
    position: absolute;
  }

Należy pamiętać, że mogą one mieć niepożądane efekty uboczne, takie jak wycinanie przepełnionej zawartości, obliczanie automatycznych szerokości za pomocą algorytmu zmniejszania lub dopasowywanie lub wypływanie. Problem polega na tym, że nie można mieć elementu na poziomie bloku z widocznym przepełnieniem, który ustanawia BFC.

Wyświetlacz L3 rozwiązuje te problemy:

Stworzył flowi wewnętrzne rodzaje wyświetlaczy lepiej wyrazić układ przepływu typów wyświetlaczy oraz stworzenie wyraźnej przełącznik do dokonywania elementu A BFC korzeniowy. (To powinno wyeliminować potrzebę takich hacków i […])flow-root ::after { clear: both; }overflow: hidden

Niestety, nie ma jeszcze obsługi przeglądarki. W końcu możemy być w stanie korzystać

.bfc-root {
  display: flow-root;
}

Umieść swój zmiennoprzecinkowy div(s)w, diva w CSS daj mu, overflow:hidden;
że będzie działał dobrze.

Rekomendacja W3Schools:

umieścić overflow: autona elementu nadrzędnego i będzie „kolor” całe tło z uwzględnieniem elementów marże. Również elementy pływające pozostaną wewnątrz granicy.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Nic nie brakuje. Float został zaprojektowany dla przypadków, w których obraz (na przykład) ma być umieszczony obok kilku akapitów tekstu, dzięki czemu tekst przepływa wokół obrazu. Nie zdarzyłoby się to, gdyby tekst „rozciągnął” pojemnik. Twój pierwszy akapit skończy się, a następnie następny akapit zacznie się pod obrazem (być może kilkaset pikseli poniżej).

I właśnie dlatego otrzymujesz wynik, którym jesteś.

W niektórych przypadkach, np. Gdy (jeśli) używasz tylko floatelementów do przepływu w tej samej „linii”, możesz użyć

display: inline-block;

zamiast

float: left;

W przeciwnym razie użycie clearelementu na końcu działa, nawet jeśli może być sprzeczne z ziarnem, aby potrzebować elementu do tego, co powinno działać CSS.

Oto bardziej nowoczesne podejście:

.parent {display: flow-root;} 

Nigdy więcej wyraźnych poprawek.

ps Korzystanie z przelewu: ukryty; ukrywa cień pudełka, więc ...

Dziękuję LSerni , rozwiązałeś to dla mnie.

Osiągnąć to :

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

Musisz to zrobić :

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Jak mówi Lucas, opisujesz zamierzone zachowanie właściwości float. Tym, co dezorientuje wiele osób, jest fakt, że float został znacznie przesunięty poza pierwotne zamierzone użycie w celu uzupełnienia braków w modelu układu CSS.

Zajrzyj do Floatutoriala, jeśli chcesz lepiej zrozumieć, jak działa ta właściwość.

Możesz łatwo zrobić to po pierwsze, możesz ustawić div div i zastosować justowanie zawartości w prawo lub w lewo, a problem zostanie rozwiązany.

<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
					<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
				</div>