CSS float understanding and practical application

CSS float

Floating purpose: to make sideways or vertical elements

The basic characteristics of floating

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

1. When a float element, the element must cassette blocks (change display attribute, block)
2. Floating element comprising a block, and the normal stream, as the content of the parent element cartridge
   

Float effect:

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

Box dimensions

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

Box arrangement

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

If the text is not a line box, the browser will automatically generate a line wrap text box, the box line is called the anonymous line boxes

Floating elements caused by the collapse of the parent height

Roots collapsed height: the height of a conventional automatic flow box, in the calculation, the floating box does not consider

Clear float, involving css properties:
the Clear
- the default value: none
- left: clearly left floating, the element must appear at the bottom front of all left-floating box
- right: clear floating right, the element must appear in front of all the right-floating boxes below the
bottom of Clear floating around, the element must appear before all floating boxes: both -

Solution:
1: add height to the parent element

缺点: 不灵活

2: Add to the parent element overfow: hidden; (triggers a region bfc)

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

3: rearmost float to add a null tag (block element)
style empty label:

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

缺点: 代码冗余

4: Universal clearance method
child element of the float property, the parent element is added to the universal clearance method, you can solve the problem of the collapse of the height of the parent element

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

推荐使用

Scenarios

1. Text Wrapping
   
2. Laterally arranged