网页制作float(网页制作培训)
float在html是什么便签
float在html是网页布局便签。根据查询相关信息显示：float是浮动的意思，使用float意思就是网页不再是一个平面的，而是一个有上下层次的网页，，功能相当强大，相当于网页布局。
传统网页布局：浮动float、小米布局案例123
1、普通流（标准流）（多个块级元素纵向排列）
2、浮动（多个块级元素横向排列）
3、定位
所谓的标准流就是标签按照规定好默认方式排列
1、块级元素会独占一行，从上向下顺序排列
2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
以上都是标准流布局，标准流就是最基本的布局方式
注意：实际开发中，一个页面基本都包含了这三种布局方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，知道左边缘或者右边缘触及包含块或另一个浮动框的边缘。float
选择器{ float:属性值；}
1、浮动元素会脱离标准流（脱标）（浮动之后不会再保留原来的位置）
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特征（不管什么元素，添加浮动之后具有行内块元素相似的特性）（如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定）
为了约束浮动元素位置，我们网页布局一般采取的策略是：
浮动(float)
网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种： 普通流（标准流） 、 浮动 和 定位 。
html语言当中另外一个相当重要的概念—— 标准流 ！或者普通流。普通流实际上就是一个网页内标签元素正常 从上到下，从左到右排列 顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动最早是用来控制图片，以便达到 其他元素（特别是文字）实现“环绕”图片 的效果。
后来发现浮动有个很有意思的事情：就是 让任何盒子可以一行排列 ，因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经实现真正意义上的网页布局，具体CSS3会详细解释）
元素的浮动是指 设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程 。
浮动脱离标准流， 不占位置 ， 会影响标准流 。浮动 只有左右浮动 。
所以，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是 清除浮动后造成的影响 。如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
其实本质叫做 闭合 浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
可以通过 触发BFC 的方式，可以实现清除浮动效果。（BFC后面讲解）
:after 方式为空元素的升级版，好处是不用单独加标签了。
小问题：
谁能解释下网页制作中浮动（float）的意思啊？
float为CSS中指定对象是否及如何浮动的属性,通常值有三种 float : none | left | right，意思分别为不浮动，靠左，靠右
css中float的前世今生
1，浮动的历史
在早期网页制作过程中，为了达到图片word文档那样的文字环绕效果，不至于图片和文字不在一行显示，图片占据一行，文字占据一行，这样的样式并不符合大众的审美观，浪费空间，所以w3c就创建了float这个css属性。
2，浮动的包裹性和破坏性
破坏性是指子级元素设置浮动后将会跳出父级元素，父级元素将不被浮动元素所撑开，除非清除浮动带来的影响。
包裹性是指子级元素设置浮动后，并且父元素已经被清除浮动后将会将子元素包裹住，就像inline-block一样。
4，浮动在布局中的应用
(1)，双飞翼布局
双飞翼布局就是利用float和margin负值相结合的方式，将center定位到最中间，难点在于margin单位百分比的理解。
(2)，圣杯布局
圣杯和双飞翼区别：
二者都是三栏自适应布局方案，圣杯布局是需要结合相对定位，用到left属性，而双飞翼布局只需要使用浮动和margin定位，前者三栏布局是每栏相互独立，而后者是center占据是100%,left和right是浮在center上的。
(2)，两列布局
如图五图六所示，当左侧div左浮动，右侧div将会自动适应余下的宽度，当界面大小发生改变时，右侧div同样会随着变化，如果想让左右div中间有一个间距的话，我们可以用右侧div设置一个margin-left为：左侧div的宽度+间距。
如果想让左侧右侧同时自适应的话，我们可以让右侧元素BFC化，此时左侧元素div的marin-left才会有效，如果右侧div不BFC化的话，属于正常流，而浮动已经脱离正常流，所以此时它的margin-left是无效的。
5，清除浮动带来的影响的方法
(1)，使用clear:both
.father:after{/*IE7和IE6不识别*/
content:'';
display:block;
clear:both;
overflow:hidden;
height:0;
}
.father{
*zoom:1;/*兼容IE7*/
}
(2)，内部使用空标签
div{clear:both;}
缺点是多了一个空标签，无意义。
(3)，使用BFC
在子元素中使用overflow,position,inline-block,tabel-cell
(4)，使用table
.father:after{/*IE7和IE6不识别*/
content:'';
display:table;
clear:both;
}
.father{
*zoom:1;/*兼容IE7*/
}