Digamos que você tenha um div, dê um definido widthe coloque elementos nele, no meu caso um imge outro div.

A ideia é que o conteúdo do contêiner divfaça com que ele divse estique e seja um pano de fundo para o conteúdo. Mas quando faço isso, o conteúdo divdiminui para se ajustar aos objetos não flutuantes, e os objetos flutuantes ficam totalmente para fora, ou meio para fora, meio para dentro e não têm qualquer influência sobre o tamanho do grande div.

Por que é isso? Há algo que está faltando e como posso obter itens flutuantes para esticar o heightconteúdo de um contêiner div?

O mais fácil é colocar overflow:hiddena div pai e não especificar uma altura:

#parent { overflow: hidden }

Outra maneira é também flutuar a div pai:

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

Outra maneira usa um elemento claro:

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

CSS

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

Razão

O problema é que os elementos flutuantes estão fora de fluxo :

Um elemento é chamado fora de fluxo se for flutuado, absolutamente posicionado ou for o elemento raiz.

Portanto, eles não impactam os elementos circundantes como um elemento em fluxo .

Isso é explicado em 9.5 flutuadores :

Como uma bóia não está no fluxo, as caixas de bloco não posicionadas criadas antes e depois da caixa de bóia fluem verticalmente, como se a bóia não existisse. No entanto, as caixas de linha atuais e subseqüentes criadas ao lado do flutuador são reduzidas conforme necessário para abrir espaço para a caixa de margem do flutuador.

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>

Isso também é especificado em 10.6 Cálculo de alturas e margens . Para blocos "normais" ,

Somente crianças no fluxo normal são levadas em consideração (ou seja, caixas flutuantes e caixas absolutamente posicionadas são ignoradas […])

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>

Solução Hacky: autorização

Uma maneira de resolver o problema está forçando algum elemento em fluxo a ser colocado abaixo de todos os flutuadores. Então, a altura do pai aumentará para envolver esse elemento (e, portanto, os flutuadores também).

Isso pode ser alcançado usando a clearpropriedade :

Essa propriedade indica quais lados das caixas de um elemento não podem estar adjacentes a uma caixa flutuante anterior.

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>

Portanto, uma solução é adicionar um elemento vazio clear: bothcomo o último irmão dos carros alegóricos

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

No entanto, isso não é semântico. Então, gere melhor um pseudoelemento no final do pai:

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

Existem várias variantes dessa abordagem, por exemplo, usar a sintaxe de dois pontos obsoleta :afterpara oferecer suporte a navegadores antigos ou usar outras telas no nível de bloco, como display: table.

Solução: raízes BFC

Há uma exceção ao comportamento problemático definido no início: se um elemento de bloco estabelecer um Contexto de Formatação de Bloco (é uma raiz BFC), ele também envolverá seu conteúdo flutuante.

De acordo com 10.6.7 alturas 'Auto' para raízes de contexto de formatação de bloco ,

Se o elemento tiver descendentes flutuantes cuja borda da margem inferior estiver abaixo da borda de conteúdo inferior do elemento, a altura será aumentada para incluir essas arestas.

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>

Além disso, conforme explicado 9.5 flutuadores , as raízes do BFC também são úteis devido ao seguinte:

A caixa de borda de uma tabela, um elemento substituído no nível de bloco ou um elemento no fluxo normal que estabelece um novo contexto de formatação de bloco […] não devem se sobrepor à caixa de margem de quaisquer flutuadores no mesmo contexto de formatação de bloco que o próprio elemento .

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>

Um contexto de formatação de bloco é estabelecido por

• Bloquear caixas com overflowoutras que não sejam visible, por exemplo,hidden

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

• Recipientes de bloco que não são bloqueiam caixas: quando displayestiver definido para inline-block, table-cellou table-caption.

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

• Elementos flutuantes: quando floatestá definido como leftou right.

  .bfc-root {
    float: left;
  }

• Elementos absolutamente posicionados: quando positionestá definido como absoluteou fixed.

  .bfc-root {
    position: absolute;
  }

Observe que eles podem ter efeitos colaterais indesejados, como recortar conteúdo excedente, calcular larguras automáticas com o algoritmo de encolher para ajustar ou ficar fora de fluxo. Portanto, o problema é que não é possível ter um elemento no nível do bloco em fluxo com estouro visível que estabelece um BFC.

A tela L3 soluciona esses problemas:

Criou os tipos de exibição internoflow e para expressar melhor os tipos de exibição do layout de fluxo e criar uma opção explícita para transformar um elemento em uma raiz BFC . (Isso deve eliminar a necessidade de hacks como e […])flow-root ::after { clear: both; }overflow: hidden

Infelizmente, ainda não há suporte para o navegador. Eventualmente, poderemos usar

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

Coloque o seu flutuante div(s)em um dive em CSS, pois overflow:hidden;
ele funcionará bem.

Recomendação do W3Schools:

coloque o overflow: autoelemento pai e "colorirá" todo o plano de fundo, incluindo as margens dos elementos. Os elementos flutuantes também permanecerão dentro da borda.

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

Não falta nada. O Float foi projetado para o caso em que você deseja que uma imagem (por exemplo) fique ao lado de vários parágrafos de texto, para que o texto flua ao redor da imagem. Isso não aconteceria se o texto "esticou" o contêiner. Seu primeiro parágrafo terminaria e, em seguida, seu próximo parágrafo começaria sob a imagem (possivelmente várias centenas de pixels abaixo).

E é por isso que você está obtendo o resultado que é.

Em alguns casos, ou seja, quando (se) você está apenas usando floatpara que os elementos fluam na mesma "linha", você pode usar

display: inline-block;

ao invés de

float: left;

Caso contrário, o uso de um clearelemento no final funcionará, mesmo que ele vá contra a granulação para precisar de um elemento para fazer o que deveria ser um trabalho CSS.

Aqui está uma abordagem mais moderna:

.parent {display: flow-root;} 

Não há mais correções.

ps Usando estouro: oculto; esconde a sombra da caixa tão ...

Obrigado LSerni, você resolveu isso para mim.

Para alcançar isto :

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

Você tem que fazer isso :

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

Como Lucas diz, o que você está descrevendo é o comportamento pretendido para a propriedade float. O que confunde muitas pessoas é que o float foi muito além do uso original pretendido para compensar as deficiências no modelo de layout CSS.

Dê uma olhada no Floatutorial se quiser entender melhor como essa propriedade funciona.

Você pode fazer facilmente com o primeiro, você pode flexionar a div e aplicar o conteúdo justificado à direita ou à esquerda e seu problema está resolvido.

<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>