compreensão CSS bóia e aplicação prática

CSS flutuador

propósito flutuante: para o lado fazer ou elementos verticais

As características básicas da flutuante

float属性值为：
	- none: 默认值，不浮动
	- left：左浮动，元素靠上靠左
	- right：右浮动，元素靠上靠右

1. Quando um elemento flutuador, os blocos de cassetes elemento mosto (atributo de exibição mudança, bloco)
2. elemento flutuante compreendendo um bloco, e o fluxo normal, tal como o conteúdo do cartucho elemento pai
   

Flutuar efeito:

1. 左浮动找左边,右浮动找右边
2. 浮动只影响后面的元素,不影响前面的元素
3. 父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行
4. 子元素高度不一致的浮动元素被迫换行时,可能被卡着
5. 结构先写的先浮动,后写的后浮动
6. 浮动元素的父元素没有高度时，会导致父级元素高度塌陷

dimensões da caixa

1. 不设置宽度/宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto，为0
4. 边框、内边距、百分比设置与常规流一样

arranjo box

1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流盒子
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生

Se o texto não é uma caixa de linha, o navegador irá gerar automaticamente uma caixa de texto de linha envoltório, a linha de caixa é chamado as caixas de linha anônimos

elementos, causada pela queda da altura de flutuação pai

Raízes desabou height: a altura de uma caixa de fluxo automática convencional, no cálculo, a caixa flutuante não considera

Limpar float, envolvendo propriedades CSS:
a clara
- o valor padrão: none
- esquerda: claramente deixou flutuante, o elemento deve aparecer na parte frontal inferior de todos caixa à esquerda flutuante
- direita: claro flutuante direita, o elemento deve aparecer na frente de todas as caixas-flutuante direita abaixo da
parte inferior da Clear flutuando ao redor, o elemento deve aparecer antes de todas as caixas flutuantes: ambos -

Solução:
1: adicionar a altura para o elemento pai

缺点: 不灵活

2: Adicionar ao elemento overfow pai: oculto; (disparadores uma região BFC)

缺点: 定位出去的元素将会被隐藏

3: float mais recuado para adicionar uma tag nula (elemento de bloco)
etiqueta vazia estilo:

width: 0;
height: 0;
clear: left/right/both; /*左/右/都清除*/

缺点: 代码冗余

4: Universal método de apuramento
elemento filho da propriedade float, o elemento pai é adicionado ao método de apuramento universal, você pode resolver o problema do colapso da altura do elemento pai

.name:after{
	content:"";
	display:block;
	width:0;
	height:0;
	clear:both/left/right;
	overflow:hidden;
	visibility:hidden;
}

推荐使用

cenários

1. Quebra de texto
   
2. lateralmente dispostas