CSS3浮动与定位

合集下载

CSS3浮动与定位

CSS属性(3)-浮动定位

现因为用overflow：hidden超出的部分会被隐藏，父元素高度也不用写死，我们
只要在页面写一次清浮动的代码，在需要清浮动的位置加个clearfix类名就可以了。
定位属性
• position: static; 默认值。 • 无定位，在HTML文档流中默认的位置。
• position: absolute;(表示绝对定位) • 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
定位的特性
1、行内元素添加了绝对定位可以直接给高和宽不用转换
2、块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
3、绝对定位的盒子不受父盒子padding的影响。
4、父元素有绝对定位，可以不需要清除浮动
堆叠属性
z-index:规定元素的堆叠顺序 • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 • 元素可拥有负的 z-index 属性值 • z-index的默认属性值是0 • 仅能在定位元素上奏效（relative,fixed,absolute)
bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对
定位。如果不存在这样的元素，则相对于body元素。
定位属性
• position: relative;（表示相对定位）
• 相对于它在正常文档流的位置进行定位。
• 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示
区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
定位使用的范围
层布局模型（定位）就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其

深入理解css布局之定位与浮动

深入理解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三大模块：盒子模型、浮动、定位

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浮动与定位灵活控制元素的位置CSS是一种用于样式化网页内容的标记语言，其中的浮动和定位是页面布局的重要组成部分。

通过使用浮动和定位，我们可以实现对元素位置的灵活控制。

本文将介绍CSS中浮动和定位的基本概念、应用场景以及使用方法。

一、浮动浮动是一种CSS属性，用于指定元素在页面中的位置。

通过将元素浮动到屏幕的左侧或右侧，我们可以实现多个元素的并排显示。

1. 浮动的基本概念在CSS中，通过设置元素的`float`属性为`left`或`right`来实现浮动。

例如，设置`float: left;`可以将元素浮动到屏幕的左侧。

2. 浮动的应用场景浮动常用于实现网页的多栏布局。

通过将导航栏、侧边栏和内容区域进行浮动，可以实现这种布局效果。

3. 浮动的使用方法要使用浮动来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要浮动的元素添加一个class或id属性，用于在CSS中选择该元素。

（2）在CSS中，通过选择器选中需要浮动的元素，并设置`float`属性的值为`left`或`right`。

（3）根据需要，设置元素的宽度、高度以及其他样式属性。

二、定位定位是一种通过CSS属性来精确定位元素的方法。

与浮动不同，定位可以将元素放置在页面的任意位置。

1. 定位的基本概念在CSS中，常用的定位方式包括相对定位（`position: relative;`）、绝对定位（`position: absolute;`）和固定定位（`position: fixed;`）。

这些属性可以用于设置元素的位置。

2. 定位的应用场景定位常用于实现网页的特殊效果，如悬浮菜单、弹出窗口等。

通过使用不同的定位方式，我们可以将元素放置在页面的任意位置。

3. 定位的使用方法要使用定位来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要定位的元素添加一个class或id属性，用于在CSS中选择该元素。

（2）在CSS中，通过选择器选中需要定位的元素，并设置`position`属性的值为`relative`、`absolute`或`fixed`。

浮动与定位_教学设计

传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师1201 年月日课题名称第6章浮动与定位计划课时8课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。

如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。

为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。

本章将对元素的浮动和定位进行详细讲解。

教学目标●理解元素的浮动，能够为元素设置浮动样式。

●熟悉清除浮动的方法，可以使用不同方法清除浮动。

●掌握元素的定位，能够为元素设置常见的定位模式。

重点及措施教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施教学难点：元素的浮动属性float、overflow属性、元素的定位属性。

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。

教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。

1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。

CSS定位与浮动的知识点

CSS定位与浮动的知识点CSS（层叠样式表）是一种用于描述网页样式和布局的语言。

在CSS中，定位和浮动是两个重要的概念，它们能够帮助我们对网页元素进行位置控制和布局调整。

本文将详细介绍CSS中定位与浮动的知识点。

一、定位（Positioning）定位可以让我们精确地控制网页元素的位置。

在CSS中，常用的定位方式有相对定位（Relative）、绝对定位（Absolute）、固定定位（Fixed）和粘性定位（Sticky）。

1. 相对定位（Relative）相对定位是相对于元素原本所在的位置进行定位。

使用相对定位后，元素仍然占据原来的空间，并且可以通过top、bottom、left和right属性相对移动。

相对定位的元素不会对其他元素造成影响。

示例代码：```cssdiv {position: relative;left: 50px;top: 20px;}```2. 绝对定位（Absolute）绝对定位是相对于离它最近的已定位祖先元素进行定位。

如果没有已定位的祖先元素，那么它将相对于文档的根元素（即body）进行定位。

绝对定位的元素脱离了文档的普通流，不占据空间。

示例代码：```cssdiv {position: absolute;left: 100px;top: 50px;}```3. 固定定位（Fixed）固定定位是相对于浏览器窗口进行定位，无论页面滚动与否，元素始终停留在设置的位置。

常用于创建固定的导航栏或广告栏等元素。

示例代码：```cssdiv {position: fixed;right: 20px;bottom: 30px;}```4. 粘性定位（Sticky）粘性定位是相对定位和固定定位的结合。

当元素在容器中可见时，它的行为类似于相对定位，当元素滚动到容器外时，行为类似于固定定位。

粘性定位需要设置位置属性和至少一个偏移属性。

示例代码：```cssdiv {position: sticky;top: 50px;}```二、浮动（Floating）浮动可以使元素脱离文档的普通流，向左或向右移动，直到碰到包含它的容器边界或其他浮动元素为止。

HTML5+CSS3网站设计浮动与定位

6.3 元素地定位
2.静态定位static
学习目地
掌握静态定位,能够通过static将元素地定位模式设置为静态位置。
6.3 元素地定位
2.静态定位static
静态定位是元素地默认定位方式,当position属性地取值为static时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流默认地位置。任何元素在默认状态下都会以静态定位来确定自己地位置,所以当没有定义position属性时,并不说明该元素没有自己地位置,它会遵循默认值显示为静态位置。在静态定位状态下,无法通过边偏移属性（top,bottom,left或 right）来改变元素地位置。
边偏移
通过边偏移属性top,bottom,left或right,来精确定义定位元素地位置,其取值为不同单位地数值或百分比。
边偏移属性 top bottom left right
描述顶端偏移量,定义元素相对于其父元素上边线地距离底部偏移量,定义元素相对于其父元素下边线地距离左侧偏移量,定义元素相对于其父元素左边线地距离右侧偏移量,定义元素相对于其父元素右边线地距离
6.3 元素地定位
3.相对定位relative
学习目地
掌握相对定位地方式,能够通过 relative对元素进行相对定位。
6.3 元素地定位
3.相对定位relative
相对定位是将元素相对于它在标准文档流地位置进行定位,当position属性地取值为relative时,可以将元素定位于相对位置。
6.4 元素地类型与转换
3.元素地转换
inline
此元素将显示为行内元素（行内元素默认地display属性值）。
display

CSS定位与浮动

2、CSS定位属性的取值：
☆overflow属性的取值：
vertical-align
z-index
3、CSS浮动：
(1)、float属性：
float 属性定义元素在哪个方向浮动。

以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

(3)、clear属性：
clear 属性规定元素的哪一侧不允许其他浮动元素。

CSS布局之浮动（float）和定位（position）属性的区别

CSS布局之浮动（float）和定位（position）属性的区别CSS 布局 - position 属性position 属性规定应⽤于元素的定位⽅法的类型（static、relative、fixed、absolute 或 sticky）。

position 属性position 属性规定应⽤于元素的定位⽅法的类型。

有五个不同的位置值：staticrelativefixedabsolutesticky元素其实是使⽤ top、bottom、left 和 right 属性定位的。

但是，除⾮⾸先设置了 position 属性，否则这些属性将不起作⽤。

根据不同的 position 值，它们的⼯作⽅式也不同。

CSS 布局 - 浮动和清除float 属性float 属性⽤于定位和格式化内容，例如让图像向左浮动到容器中的⽂本那⾥。

float 属性可以设置以下值之⼀：left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动（将显⽰在⽂本中刚出现的位置）。

默认值。

inherit - 元素继承其⽗级的 float 值最简单的⽤法是，float 属性可实现（报纸上）⽂字包围图⽚的效果。

float: left|right; 可以⾃动排列⾃动折⾏, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位;使⽤：position: absolute会导致元素脱离⽂档流，被定位的元素等于在⽂档中不占据任何位置，在另⼀个层呈现，可以设置z-index。

PS的图层效果就是position: absolute。

float也会导致元素脱离⽂档流，但还在⽂档或容器中占据位置，把⽂档流和其它float元素向左或向右挤，并可能导致换⾏。

图⽚的⽂字环绕布局效果就是float。

css 浮动和定位

用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用 CSS来控制则没有这个问题。比如对列表应用以下样式： li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
这些定位属性都需要如下属性配合 top bottom left right:
绝对定位：absolute:
1、不保留原先位置的占位 2、默认原点是浏览器的左上角（可以更改
原点） 3、要精确定位必须配合定位属性（ top、
bottom、 left 、 right ）
如何以父级标签左上角为原点？(在绝对定位的情况下)
以上都可以写在一行font属性里（除了color属性需要单独写）： font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
固定宽度汉字截断 text-overflow
南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海
</div>
竖排文字 — 使用writing-mode
writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：
清除浮动
1.额外标签法 w3c 组织推荐使用在容器的末尾加一个
clear:both 。空标签可以是div标签，也可以是P标签缺点：增加一个空div

CSS3样式表- 定位

div-footer高度100px 清除左侧，背景色#F4F4F4
2 相对定位
✓ 元素相对于其正常位置进行定位，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
✓ 水平方向通过left和right来指定偏移量，垂直方向使用top和bottom来指定偏移量。
2 相对定位
15px
#block1{ position:relative; left:30px; top:30px;
1
浮动
1
浮动
三个盒子向右浮动
课堂任务1
✓ 页面颜色背景： bb0102
✓ 文字颜色：FFFF00 ✓ 第一个段落首字符：
黑体、85px、向左浮动 ✓ 图片向左浮动 ✓ 各个元素的水平间距、垂直间距依照图片自行调整
1、字体：Arial
2、ul不显示项目符号 list-style-type:none;
Box2的z-index比box1大，所以box2在box1的上面 Box1的z-index比box2大，所以box1在box2的上面
课堂任务3
<body> <div id="whole"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div>
✓ 如果没有已经定位的祖先元素，就会以浏览器窗口为基准进行定位。
✓ 已经定位指的是position属性值被设置，且值不是static。

CSS布局之绝对定位和浮动的区别

CSS布局之绝对定位和浮动的区别CSS布局之绝对定位和浮动的区别在CSS中，实现分栏布局有两种⽅法。

第⼀种⽅法是使⽤四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将⽂档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。

第⼆种则是使⽤CSS中的浮动(float)概念。

绝对定位或浮动都能够⽤来实现分栏效果。

⼆者可以独⽴使⽤，也可以结合在⼀起，相辅相成。

1、绝对定位绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这⾥⾯没有什么需要猜测或者运⽓的成分。

由于应⽤了绝对定位的元素被不留痕迹地从常规⽂档流中完全移除，所以它也不会为其他元素带来任何的影响。

那么让我们试⼀试⽤绝对定位如何实现下⾯的布局。

这是⼀个三栏的布局，并且是居中显⽰的。

其中，A栏是主体内容栏，B栏和C栏都是侧边栏。

⾸先，我们不可能直接⽤绝对定位将A、B、C三栏定位到居中的位置，因为每个⼈显⽰器的分辨率是不同的，在1024X768分辨率的显⽰器上定位的居中效果，在别的分辨率的显⽰器上看到的效果肯定不会是居中显⽰的，那么，该如何解决这个问题呢?幸好，在绝对定位模型中有个极为有⽤的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于⽂档的根元素html(也就是浏览器窗⼝的左上⾓)计算，⽽是会基于其容器的左上⾓计算这个偏移量。

换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的⾓⾊。

所以，利⽤这个特性，我们给A、B、C栏的外部加上⼀个容器D，如下图：然后，我们让容器D居中，并给它加上⼀个属性：position:relative，这样，再⽤绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上⾓的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。

css浮动，绝对，相对定位

css浮动，绝对，相对定位浮动float:属性{ float:none; 默认值，对象，不漂浮 float:left; ⽂本流向对象的右边 float:right;};清除浮动clear:属性{ clear:none; 允许对象两遍都可以浮动 clear:left; 不允许左边有浮动 clear:right; 不允许右边有浮动 clear:both; 两遍都不允许有浮动};定位position:属性{ position:static; 静态定位 position:fixed; 固定定位 position:absolute;　绝对定位 position:relative; 相对定位};绝对定位（absulote）:将对象从⽂档流中拖出使⽤left,rigt,top,bottom属性,相对于最接近得⼀个具有定位设置的⽗对象，进⾏绝对定位，如果不存在这样的⽗对象，则依据body对象。

绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为⽆单位的整数，⼤的在最上⾯，可以有负值（⽬前负值FF不⽀持）。

相对定位 ( relative ) :对象不可层叠，但是，left,right,top,bottom,这些属性在正常⽂档流中偏移位置。

同样可以⽤z-index分层设计。

定位的形象解释(1) 绝对定位(absolute)如果使⽤决定定位，绝对定位对象会让出⾃⼰原先占⽤位置，它是贡献的。

如果之前没有对⽗元素定位，那么⼦元素位置不会受⽗元素位置影响，⽗元素怎么移动，⼦元素还是在原来的位置，⾄于⼦元素要在哪个位置，则以html(body左上⾓)上⾓为准,⽤left，right，top，bottom 值来定位，但是如果⽗元素也给出了定位设置(通常是相对定位)，此时⼦元素的位置就没有那么⾃由了，尽管此时⼦元素改变位置了也不会影响⽗元素(⽂本流)，但它还是要遵循⽗元素的话，⽗元素会告诉它"你可以活动，但应该在我的范围内⾛动，⽐⽅说我要你在我左上⽅1⽶处，你就要跟死这⼀点，我⾛你也要跟着⾛",课件绝对定位的对象参考⽬标是它的⽗极。

第7章 css3浮动布局

• 在实际开发中，推荐使用::after伪元素来清除浮动。
第七章浮动布局
教学重点
➢ 掌握正常文档流 ➢ 深入浮动 ➢ 深入浮动的影响 ➢ 深入浮动的负作正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
• 脱离文档流，指的是脱离正常文档流。如果我们想要改变正常文档流，可以使用有两种方法：一种是“浮动”；另外一种是“定位”。
7.5 清除浮动
• 在CSS中，常见清除浮动的方法有3种。
➢ clear:both ➢ overflow:hidden ➢ ::after伪元素
• clear:both清除浮动会增加多余标签，overflow:hidden清除浮动会使得超出父元素部分隐藏。使用::after伪元素来清除浮动，则不会有这些缺点。
（2）当一个元素定义了float:lef或float:right时，这个元素会脱离文档流，后面的元素会紧跟着填上了空缺的位置。
7.3 浮动的影响
• 对于浮动的影响，包括以下4个方面。
➢ 对自身的影响 ➢ 对父元素的影响 ➢ 对兄弟元素的影响 ➢ 对子元素的影响
7.4 浮动的负作用
• 浮动带来的最常见的负作用有2个。 ➢ 父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。 ➢ 页面布局错乱。
7.2 深入浮动
• 对于浮动来说，它有2个最重要的特点。（1）当一个元素定义了float:left或float:right时，不管这个元素之前是inline、 inline-block或者其他类型，都会变成block类型。也就是说，浮动元素会表现为块元素效果，然后可以定义width、height、padding和margin。如果你再去为浮动元素定义display:block，完全是多此一举。