第11讲_盒子的浮动与定位

⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤CSS 来摆放盒⼦。

把盒⼦摆放到相应位置CSS 提供了三种传统布局⽅式(简单说,就是盒⼦如何进⾏排列顺序)：普通流（标准流）浮动定位标准流标准流定义所谓的标准流:，就是标签按照规定好默认⽅式排列1. 块级元素会独占⼀⾏，从上向下顺序排列。

常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏常⽤元素：span、a、i、em 等以上都是标准流布局，标准流是最基本的布局⽅式。

浮动浮动定义浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。

⽹页布局第⼀准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。

语法：选择器{ float: 属性值; }属性值：值描述left元素向左浮动。

right元素向右浮动。

none默认值。

元素不浮动，并会显⽰在其在⽂本中出现的位置。

inherit规定应该从⽗元素继承 float 属性的值。

浮动特性⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。

同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。

但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。

⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。

深入理解css布局之定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。

今天我们来深入学习一下css布局相关的知识。

上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。

这篇我们继续...一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。

但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。

1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。

那么也就可以理解成我们刚才所说的一个二维平面的概念。

那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。

1.2 定位定位允许你使用position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。

根据position 属性的取值，元素可以分为静态定位元素static （默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。

首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。

当我们使用定位时，需要position属性和top,left,right,bottom 这两类属性共同参与来决定一个元素的定位类型和偏移量。

使用方法很简单，这里说下他们之间的区别:•relative相对定位•元素根据其在当前文档流所在位置作为参考系，进行偏移。

•定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

•absolute绝对定位•元素会将其带有position为非static的祖先元素作为参考系进行偏移。

css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。

看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。

盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。

2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。

但是两个元素的外边距会重叠。

4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。

CSS系列：CSS中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。

CSS中float属性，默认为none。

将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。

同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。

float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。

position属性可以设置为4个属性值之一：◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。

相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。

绝对定位的盒子从标准流中脱离。

它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。

2.1 staticstatic为默认值，表示块保持在原本的位置上，不会有任何移动的效果。

没有设置任何position属性相当于使用static方式。

2.2 relative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。

<!DOCTYPE html><html><head><title></title><style type="text/css">.relative {position: relative;top: 20px;left: 20px;width: 500px;}</style></head><body><div class="relative">Position相对偏移</div></body></html>在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。

CSS布局中float和position属性使用技巧2010-09-02 11:18 52css 我要评论(0)字号：T | T在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position，本文向大家描述一下这两个属性的用法。

AD：你对CSS布局中浮动float和定位position属性的使用是否熟悉，这两个属性的理解对CSS网页布局的学习非常重要，这里和大家分享一下。

CSS布局最常用属性float（浮动）和position（定位）在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。

这两个属性的理解对CSS网页布局的学习非常重要。

我们就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。

首先了解float（浮动）和position（定位）属性的基础知识：float（浮动）属性：float:none|left|right◆取值：none:默认值。

对象不飘浮left:文本流向对象的右边right:文本流向对象的左边float（浮动）属性的一个实例（一行两列）：ExampleSourceCodexhtml代码:1.<divid divid="wrap">2.<divid divid="column1">这里是第一列</div>3.<divid divid="column2">这里是第二列</div>4.<divclass divclass="clear"></div>5.<!--元素需要清除浮动但可能与Web标准意图相背-->6.</div>CSS代码:1.#wrap{width:100px;margin:0auto;}2.#column1{float:left;width:40px;}3.#column2{float:right;width:60px;}4..clear{clear:both;}5.position（定位）属性：position:static|absolute|fixed|relative◆取值：◆static:默认值。

CSS基础知识之盒模型以及浮动布局CSS基础知识之盒模型以及浮动布局谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是内容(content)、填充(padding)、边框(border)、边界(margin)；这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

盒子由几部分组成：物品+填充物+外包装+外边距content+padding+border+margin/*margin后面接多个值*//*上右下左*/margin:50px30px40px20px;/*上左右下*/margin:50px30px40px;/*上下左右*/margin:50px30px;/*上下左右*/margin:50px;通常情况下：父子关系产生边距一般用padding兄弟关系产生边距一般用marginp标签的基本样式p{font-family:"微软雅黑";/*em*/font-size:1em;/*italic斜体oblique倾斜*/font-style:oblique;/*100-900*//*bold加粗*//*lighter*//*normal*/font-weight:lighter;/*复合属性*/font:italic9002em"宋体";/*文本设置*//*underline*//*overline*//*line-through*//*text-decoration:line-through;*/ /*缩进*//*数值，可用用px也可用em，可以为负值*/ text-indent:-10px;/*left,right,center*//*justify两边对齐*/text-align:justify;/*行间距*//*如果一行内容的'情况下，可以用作垂直居中*/ line-height:-1px;/*字(单词)间距*//*可以为负值*/word-spacing:-50px;/*字符间距*//*可以为负值*/letter-spacing:-5px;}插入背景图片/*背景图片，平铺*/background-image:url("img/1.gif");/*背景图片是否重复xy*/background-repeat:repeat-y;/*背景图片大小宽高*//*background-size:100%100%;*//*1.可以使用像素值2.可以使用方向值3.可以使用百分比*/background-position:30%80%; }/*伪类hover鼠标悬停*/.p1:hover{width:400px;height:400px;}css基本样式一览css属性名：width:宽度height:高度margin:外边距padding:内边距border:边框background:背景display:显示方式font:字体font-weight文字着重font-family字体font-size文字大小font-style文字样式letter-spacing字母间距word-spacing单词间距text-align文本对齐方式text-decoration文本修饰text-indent首行缩进background-repeat背景图片重复background-image背景图片background-size背景图片大小float浮动浮动布局float:left左浮float：right右浮清除浮动的方式：1.clear:both;2.在父级中加上overflow:hidden;变为BFC(单独布局的小单位)3.用浮动去清浮动。

165 外边距margin 属性值的设置和内边距padding 是一样的，也可以设置不同的属性个数代表相应的含义。

15.3 盒子的浮动与定位通过前面几节的学习，我们已经熟悉了一个盒子内部的关系。

但实际网页上分布着大量的盒子，它们之间有着父子的相互关系。

要把一个盒子和其他盒子之间的关系搞清楚并不容易。

为了方便组织页面上的各种盒子，CSS 规范的制定者进行了深入细致的思考，既能有足够的灵活性，可以适应各种排版要求，又能使规则尽可能简单易用，让用户都能容易实现。

CSS 规范首先确定了一种标准的排版方式，可以保证设置的简单化，各种网页元素都按照这种标准的方式进行布局，这就是所谓的“标准流”方式。

但仅有标准流方式还不够灵活，是无法实现所有的排版方式的，所以CSS 规范还给出了其他的布局方法，如“浮动”属性和“定位”属性等。

15.3.1 标准流“标准文档流”简称为“标准流”，是指在不使用其他与排列和定位相关的特殊CSS 规则时各种页面元素默认的排列规则。

页面元素可以分为如下两类。

（1）块级元素（block level ）：总是以一个块的形式表现出来，并和同级的兄弟依次垂直排列，左右撑满。

比如<li>标记，总不会排在同一行，而是和相邻的<li>垂直排列。

（2）行内元素（inline ）：相邻元素之间横向排列，到最右端自动折行。

比如<a>标记。

标准流就是CSS 默认的块级元素和行内元素的排列方式。

在一个页面中如果没有出现特殊的排列方式，那么所有的页面元素将以标准流的方式排列，即一个个盒子形成一个序列，同级别的盒子依次在父级盒子中按照块级元素或行内元素的排列方式进行排列，同级父级盒子又依次在它们的父级盒子中排列，依此类推，整个页面如同河流和它的支流，所以称为“标准流”。

15.3.2 盒子的定位原则掌握盒子在标准流中定位原则需要对margin 有很深刻的理解，因为padding 只在盒子内部，不会影响盒子的外部，margin 是一个盒子的外边距，它直接影响与其他盒子之间的关系。