关于CSS浮动布局

HTML布局有三种，标准流，浮动和布局。标准流是我们熟悉的传统的HTML文档中的文本布局。标准流中，块级元素独占一行，垂直放置。行级元素在水平方向上一个接一个的排列。标准流就是排布在哪里不是由它自己决定，是由它所排的位置决定的。相当于排队，能排在多少取决于前面有多少人。下面来介绍浮动。

浮动

浮动，就是使元素脱离标准流，移动到其父元素指定的位置的过程。
float: left
float: right

相较于设置inline-block，块级元素加浮动不仅可以排成一行设置左对齐，还可以设置右对齐。

关于浮动的面试问题

浮动的子元素无法超出父元素范围，如果父元素有padding，那么子元素无法超出padding

两个div，第一个浮动，如何布局？
三个div，第一个浮动，如何布局？-》补位

两个div，第二个浮动，如何布局？
三个div，第二个浮动，如何布局？

三个div，第一个和第三个浮动，如何布局？-》浮动只对其后的元素产生影响，但是块级元素对前后都产生影响

结论：在工程中，一个父元素下，尽量让所有的子元素都浮动

一个块级元素浮动以后，会产生类似inline-block的特性，宽度是根据自己的内容的最小宽度，而不是父元素的最大宽度。
一个行内元素浮动以后，会产生类似inline-block的特性，可以设定宽度和高度

如何清除浮动？

• 为什么要清楚浮动？

在某些情况下，我们不能设定父元素的高度，但是所有的子元素都是浮动的（脱标），父元素就认为他们不存在，父元素又不能设定高度，想依赖子元素子元素又脱标了，父元素的高度为0，父元素后面的元素会上提。

• 清楚浮动的四种方法

1. 额外标签法
在最后增加一个额外的div，用clear：both去掉浮动属性，W3C推荐的一种方法，增加了一个莫名其妙的标签
2. overflow:hidden
强制父元素计算内部高度
3. after伪元素
4. before、after伪元素

如何确定尺寸？

• 借（chao）鉴（xi）已经存在的网页

1. 使用Chrome的开发者工具，去查找一个元素的宽，高，padding，border，margin

• 得到了一张图片（windows截图）

液晶屏的像素
DPI（每英尺液晶像素的个数，是液晶屏的物理参数）
window本身的缩放，Chrome的缩放
2. 使用画笔，用选择框选中，像素数/window缩放比例
3. 使用PS，用切片工具，像素数/window缩放比例