float(float是什么数据类型)

正常流量(正常流量)很多人把这个词翻译成文档流，直译可以是普通流，也可以是标准流。我们前面说过，网页布局的核心是用CSS来放置框的位置。如何把盒子放在正确的位置？CSS有三种定位机制:普通流(标准流)

正常流量(正常流量)

很多人把这个词翻译成文档流，直译可以是普通流，也可以是标准流。

我们前面说过，网页布局的核心是用CSS来放置框的位置。如何把盒子放在正确的位置？

CSS有三种定位机制:普通流(标准流)、浮动和定位。

html中另一个非常重要的概念——标准流！或者正常流。普通流实际上是指一个网页中的标签元素按照从上到下、从左到右的顺序正常排列。比如块级元素会独占一行，行内元素会按顺序来回排列；按照这个大前提的布局，绝对没有例外，这叫正常流程布局。

浮动(浮动)

浮动最初用于控制图片，以便其他元素(尤其是文字)可以“包围”图片。

后来我们发现了一个关于浮动的很有意思的事情:就是任何一个盒子都可以排成一排，于是我们慢慢偏离主题，用浮动的特点来布局。(CSS3一直是我们真正的网页布局)

什么是漂浮？

元素的浮动是指设置了浮动属性的元素将脱离标准正常流程的控制，移动到其父元素中指定位置的过程。

在CSS中，float由float属性定义，其基本语法格式如下:

选择器{float:属性值;}

选择器{float:属性值；}

浮动的详细内部特征

飘离标准流，不占位置，会影响标准流。只能左右浮动。

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

浮动首先创建包含块的概念(包)。也就是说，浮动元素总是与其最近的父元素对齐。但不会超出内边距的范围。

浮动元素排列位置与最后一个元素(块级)相关。如果前一个元素是浮动的，A元素的顶部将与前一个元素的顶部对齐；如果前一个元素是标准流，则A元素的顶部将与前一个元素的底部对齐。

由此可以推断，如果一个父盒子中的一个子盒子是浮动的，那么其他所有的子盒子都需要浮动。以便它可以成行显示。添加一个浮动后，元素将具有内联块元素的特征。元素的大小完全取决于定义的大小或默认的内容浮动。根据元素的书写位置显示相应的浮动。汇总:浮动-->:

浮动的目的是使多个块级元素出现在同一行上。

浮动排水管

浮动:浮动的元素框是浮动的，浮动在其他标准流框的顶部。

漏:加了浮箱，不占位置。它是浮动的，它的原始位置被泄漏到标准流盒。

特别说明:首先，浮动框需要和标准流的父级一起使用。其次，特别注意浮动可以使元素显示方式体现内联块的特点。

版心和布局流程

看报纸的时候很容易发现，虽然报纸的内容很多，但是经过合理的排版，版面依然清晰易读。同样，在制作网页时，为了使网页清晰有条理，需要对网页进行“排版”。

“版本中心”(可视区域)是指网页主要内容所在的区域。通常，它在浏览器窗口中水平居中显示。常见的宽度值有960px、980px、1000px、1200px等。

布局

为了提高网页制作的效率，布局时通常需要遵循一定的布局程序，如下:

1.确定页面的中心(可视区域)。

2.分析页面中的行模块和每个行模块中的列模块。

3.制作HTML结构。

4.初始化CSS，然后利用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度并居中。

清除浮动

生活就像坐北京地铁1号线:

通过国际贸易，羡慕繁荣；

路过天安门广场，想象权力；

路过金融街，梦想发财；

公主坟后，想起华丽的家族；

过了玉泉路，还是雄心勃勃…

这时，一个声音飘进我的耳朵:乘客您好，八宝山快到了！

猛然醒悟:人生苦短，有始有终。

就像我们的浮生，有浮生的开始，就应该有浮生的结束。

为什么要清除浮动？

前面说了，浮动的性质是用来混合排列一些字符的，但是当我们用来布局的时候，就会出现很多问题。但是，你不能说飘就不好。

。

由于浮动元素不再占据原始文档流的位置，它将影响后续元素的布局。要解决这些问题，就必须清除此时漂浮在这个元素中的东西。

准确的说，不是清除浮动，而是清除浮动后的影响。

如果漂浮从一开始就是一个美丽的错误，请用正确的方法去挽回。

清浮精

Clear floating主要是解决由于子元素的浮动导致父元素内部高度为0的问题。

清除浮动方法

其实本质上还是叫封闭浮动比较好。记住，清除浮动就是把浮动框圈在里面，让父框关闭出口和入口，防止它们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下:

选择器{clear:属性值;}

选择器{clear:属性值；}

额外标签法

W3C建议在浮动元素的末尾添加一个标签空，比如

& lt/div & gt；、或其他标签br等。优点:易懂易写。

缺点:增加了很多无意义的标签，结构性差。我只能说我不接受你推荐的w3c方法。你不配。。。

父添加溢出属性方法

通过触发BFC，可以消除浮动效应。(稍后在BFC解释)

可以添加:溢出隐藏|自动|滚动到父级。优点:代码简洁

缺点:当内容增加时，容易造成内容不会自动换行，这样内容会被隐藏，需要溢出的元素无法显示。

在伪元素后使用以清除浮点。

:after是空元素的升级版，优点是不需要单独标记。

用法:

。clearfix:在{内容:\" \"之后。；显示:块；高度:0；明确:两者都有；可见性:隐藏；} ​ .clear fix { * zoom:1；} /* IE6，7专有*/优点:符合封闭浮动思想结构，语义正确。

缺点:因为IE6-7不支持:after，所以使用zoom:1触发hasLayout。

代表网站:百度、淘宝、网易等。

注意:尽量跟内容中的一个点:“”，或者别的，而且尽量不要空，否则firefox 7.0之前的版本会有生成的空网格。

通过在前后使用双虚拟元素来清除浮动。

用法:

。clearfix:之前，。clearfix:在{内容:“”之后；显示:表格；/*这句话可以启动BFC BFC可以清除浮动，BFC我们稍后再谈*/}。clear fix:after { clear:both；}.clear fix { * zoom:1；}优点:代码更简洁

缺点:因为IE6-7不支持:after，所以使用zoom:1触发hasLayout。

代表网站:小米、腾讯等