html中盒子浮动怎么写,html04浮动

浮动(float)

普通流(normal flow)

前面我们说过，网页布局的核心，及是用css 来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS 的定位机制有3种：普通流(标准文档流)、浮动和定位

html语言当中另外一个相当重要的概念--标准文档流！或普通流，或文档流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行行内元素会依次排列；按照这种大前提的布局派来之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

什么是浮动？

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

在css 中，通过float属性来定义浮动，

选择器{float:属性值；

属性值

}

浮动详细内幕特性

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

浮动首创包含块的概念。就是说，浮动的元素总是找理他最近的元素对齐。但是不会超粗内边距的距离

5F82E15D-64A9-4D4A-A110-D923C79A9966.png

浮动的元素排列位置，跟上一个元素(块级)有关。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的地步对齐。

4EE475A7-7643-4E23-BB05-B6DADC066930.png

2.png

由2可以推断出，一个盒子里面的子盒子，如果起哄一个子级有浮动的，则其他子级都需要浮动。这样才能一行显示

元素添加浮动后，元素会具有行内块元素的特征。元素的大小完全取决于丁阿姨的大小或者默认的内容多少

浮动更具元素书写的位置来显示相应的浮动。(float 可以让元素变成行内块的元元素。在一行红可以设置宽高)

总结：浮动--》

浮动的目的就是为了让多个元素同一行上显示。

float 浮 漏 特

浮 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：加了浮动的盒子，不占位置的，他浮起来了，他原来的位置漏给了标准流的位置。

特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特备的注意浮动可以是元素显示模式体现为行内模块。

版心和布局流程

阅读报纸的时候容易发现，虽然报纸中的内容喝多，但是经过合理的排版，版面依然清晰。在制作网页时，要想使网页结构清晰、有条理，也需要对网页进行排版

布局流

为了提高网页制作的效率，布局是通常要遵守一定的布局流程

1 确定页面的版心

2 分析页面中的行模块，以及每个模块中的列模型

3 制作html页面，CSs文件

请除浮动本质

清除浮动主要为了解决父级元素因子级浮动引起内部高度为0的问题。

清除浮动的方法

其实本质叫做别和浮动更好一些，清除触动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

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

选择器{clear:属性值}

5F915A69-B948-45EE-8C7C-AC0887E33FD5.png

额外标签法

是W3C推荐的做发是通过在浮动元素末尾加一个空的标签如

或其他标签br等

优点：通俗易懂，书写方便。

缺点：添加许多无意义标签，结构化较差。

父级添加overflow属性方法。

可以通过出发BFC的方式，可以实现清除浮动效果。

可以给父级添加：overflow 为hidden |auto|scroll 都可以实现

优点：代码简洁

缺点：内容增多时候不会自动换行导致内容被隐藏，无法显示要益处的元素。

用after 伪元素清除浮动

：after 方式为空元素的升级版，好处是不用单独加标签

使用方法：

.clearfix:after{content:"." ;display：block；height：0；clear：both；visibility：hidden}

.clearfic:{zoom:1;}/IE6/7*/

优点：复合闭合浮动思想 结构语意正确

确点：由于IE6-IE7不支持after 使用zoom：1触发haslayout

使用before和after 双微元素清除浮动

使用方法：

.clearfix:before,.clearnfix：after{

content：".";

display:table;

}

.cleatfix:agter{

cleat:both;

}

.clearfix{*zoom:1;}

定位

浮动，关键字在一个浮上买呢，那么我们定位，关键在于一个位上面

定位是我们css算是数一数二的难点了，但是css离不开定位，特别是后面的js特效，天天和定位打交到。

为什么使用定位？

那么定位，最长运用的场景在哪里？

元素的定位属性

元素的定为属性重要包括定位模式和边偏移两部分

1 边偏移

边偏移

也就说，以后定位要和这边便宜搭配使用了。

2 定位模式

在css 中，position 属性永远定义元素的定位模式，其基本语法格式如下

选择器{postion:属性值}

positon 蝉蛹的属性值

postion定位

静态定位(static)

静态定位是所有元素的默认方式，点那个postion的值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置，也就是玩也行所有的元素模式都是静态定位哦。其实就是标准流的特征。

在静态定位下，无法通过边属性(top。bottom/left/right)来改变元素的位置

用法：用来清除定位的。

2 相对定位(自恋型)relative(相对于自己原来的位置)

相对定位是将元素相对于它在其他标准流中的位置进行定位，当postion属性的值取值为relative 可以经元素定位于相对位置。

对元素是指相对定位后，可以通过边偏移属性改变元素定位，但是它在文档流中的位置依然保持。

注意：

1.相对定位最重要的一点是，他通过边偏移移动位置，但是原来所占有的位置继续占有

2 其次，每次移动的位置，是以自己的左上角为基点(相对于自己的位置)

就是说，相对于定位的盒子荏苒在标准流中，它后面的盒子荏苒以标准刘方式对待它。

如果说浮动的主要米的是让一个货多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

3 绝对定位(absolute)

绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占有位置。

1 如果父类咩有定位

如过父类没有定位，以浏览器为标准对其(document)

子绝父相

这个“子绝父亲相”太重要了，是我们学习定位的口诀，时刻记住

这句好的意思是子级别是绝对定位的话，父亲要用相对定位。

首先，决定定位是将元素一句最近的已经定位绝对、固定、或相对定位 的父元素进行定位，就是说，子级是绝对定位，父亲只要是定位即可(不管父亲是绝对定位还是相对定位，甚至是固定定位的口可以)，就是说，子绝父绝，子绝父相都是正确的。

因为子绝对定位不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。

者这就是子绝父相的由来。

绝对定位的盒子

普通的盒子是左右margin 改成auto 就可，但是对绝对定位就无效了

Dienwi的盒子也可以水平或者垂直居中，有一个算法。

1.首先left50%

2.然后走自己外边就的一半的值就可以了。

4 固定定位fixed (认死理)

固定定位是绝对定位的一种特殊形式，类似于正方体是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当postin属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

点那个对元素设置固定定位后，它将脱离标准流文档的控制，始终一句浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，改元素都会始终显示在浏览器窗口的固定位置。

固定定位两点：

1.固定定位的元素跟福清没有任何关系，只认浏览器。

2.固定定位完全脱标，不占有位置，不随着滚动条滚动。

叠放次序

当对多个元素同时设置定位时间，定位元素可能发生重叠

在css 中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index 层叠等级属性值，其取值可能为正整数、负数和0

注意：

1 z-index 默认的属性值为0，其值越大，定位元素在层叠元素汇中越剧上。

2 如果取值相同，则根据书写顺序，后来居上

3 后面数字不能加单位

4 只用相对定位，绝对定位，固定定位有此属性值，其余标准流，浮动，静态定位都无此属性，也不可指定此属性。

定位的总结

定位总结

定位模式的转化

和浮动一样，元素添加了绝对定位和固定位置后，元素模式也会发生转换，都转换为行内块模式。

因此比如行内元素如果添加了绝对定位或者固定定位后，可以不用换行模式，直接给高度和宽度就可以了。

元素的显示和隐藏

在css中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display visibility 和overflow

他们的主要目的是糖一个元素在页面后再难过消失，但是不在文档源码中删除。最常见的是网站的广告歌，当我们点击类似关闭不见了，新页面，他们又会出现和你玩躲猫毛。

display 显示

display 设置或检索对象是否如何显示。

dispaly：none 隐藏对象

dispaly：block 除了转换为快元素之外，同时还有显示元素的意思。

特点：隐藏之后，不在保留位置。

visibility：可见性

设置或检索是否显示对象

visible：对象可视

hidden：对象隐藏

特点：隐藏之后，继续保留原有的位置。

overflow 溢出

检索或设置当对象的内通超过其指定高度及宽度时如何管理内容

visible：不捡起内容也不添加滚动条

auto：超出自动显示滚动条，不超出不显示滚动条

hidden：不显示超过对对象的内容，超出部分隐藏掉

scroll：不管超出内容否，总是显示滚动条