下载文档原格式
CSS浮动属性Float详解什么是浮动？浮动是 css 的定位属性。
我们可以看一下印刷设计来了解它的起源和作用。
印刷布局中，文本可以按照需要围绕图片。
一般把这种方式称为“文本环绕”。
这是一个例子：在排版软件里面，存放文字的盒子可以被设置为允许图文混排，或者无视它。
无视图文混排将会允许文字出现在图片的上面，就像它甚至不会在那里一样。
这就是图片是否是页面流的一部分的区别。
网页设计与此非常类似。
在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。
浮动的元素仍然是网页流的一部分。
这与使用绝对定位的页面元素相比是一个明显的不同。
绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。
绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
像这样在一个元素上用CSS设置浮动：#sidebar { float: right; }fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
浮动的用处除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。
浮动对小型的布局同样有用。
例如页面中的这个小区域。
如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。
这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。
清除浮动清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样，向上移动到浮动元素的边界，而是会忽视浮动向下移动。
如下，一图顶千言。
上例中，侧栏向右浮动，并且短于主内容区域。
页脚(footer)于是按浮动所要求的向上跳到了可能的空间。
css不占空间的浮动方法
CSS浮动是网页布局中常用的效果之一，它可以让元素脱离正常文档流，向左或向右移动，直到它遇到另一个元素或边界。
要实现不占空间的浮动，可以使用以下方法：
1. 使用绝对定位：将浮动元素设置为绝对定位，这样它就不会占用文档流中的空间。
可以使用`position: absolute;`属性来实现。
2. 使用负外边距：通过给浮动元素添加负外边距，可以将其从文档流中“挤出”，使其不占用任何空间。
可以使用`margin-top: -10px;`和`margin-bottom: -10px;`等属性来实现。
3. 使用伪元素和绝对定位：通过将浮动元素设置为伪元素，并将其设置为绝对定位，可以实现不占空间的浮动效果。
例如，可以使用`::before`或`::after`伪元素和`position: absolute;`属性来实现。
4. 使用flex布局：使用flex布局可以将元素不占空间地浮动起来。
通过设置父元素的`display: flex;`属性，可以使其子元素浮动而不占用空间。
以上是几种实现CSS不占空间的浮动方法，可以根据具体需求选择适合的方法来使用。
有⼏种定位⽅式？分别是如何实现定位的？参考点是什么？使⽤
场景是什么？
CSS 有三种基本的定位⽅式：⽂档流、浮动和定位。
⽂档流(normal flow)：⽂档流是所有元素布局的基础，作为从左到右、从上到下的布局⽅式，这是最常⽤的⼀种排版布局⽅式。
浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌。
由于浮动框不在⽂档的普通流中，所以⽂档的普通流中的块框表现得就像浮动框不存在⼀样。
适⽤于实现⽂字环绕图⽚和多列布局。
定位(position)有以下四种⽅式：
定位⽅
实现⽅式使⽤场景式
static默认布局，按照⽂档流定位；默认布局；
relative相对于元素⾃⾝正常位置进⾏定位，元素在⽂档流中仍占据原来空间，只是表现出来的位置
适⽤于层叠效果；
会相对原来的位置偏移；
absolute绝对定位，相对于有定位属性的第⼀个⽗元素偏移，absolute定位元素会脱离⽂档流；适⽤于⼩区块的布局使⽤频繁
fixed相对浏览器窗⼝定位，设置的偏移属性，是相对于浏览器窗⼝的位置。
适⽤于⼴告等意图⼀直出现在⽤户眼
前的信息。
CSS居中浮动元素的使用方法
一、关于CSS居中浮动元素介绍
CSS居中浮动元素（Float Centered Element）是指在CSS中使用浮
动（float），让块状元素居中显示的方式。
这是一种在页面编码中使用
浮动来实现居中的技术，而不是使用定位（position）的技术。
CSS居中浮动元素是建议的CSS布局方案，它能够帮助提高代码的可
阅读性，同时还具有跨浏览器兼容性的优势。
它的典型应用场景是，当需
要在网页上水平居中显示一个或多个元素时，可以将浮动元素设置为居中，而不需要使用定位，也不会改变元素的初始HTML结构。
1、将父元素设置为“绝对定位”（position:absolute），设置其相
对定位为“居中”（top:50%; left:50%;），实现相对父元素居中的效果。
2、设置子元素的“浮动”（float）属性，使其实现左右居中的效果。
3、设置子元素的“绝对定位”（position:absolute），并设置其相
对定位为“左边”（left:0;），实现左对齐的效果。
4、如果需要调整垂直方向的居中效果，可以使用margin属性来实现，例如：margin:0 auto;
5、如果需要在浮动元素之间添加间距，可以使用margin属性来实现，例如：margin-left:20px;
6、如果有多个浮动元素，可以使用“清除浮动”（clearfix）的方法，来解决子元素之间的重叠问题。
网页设计代码css知识点在网页设计中，CSS是一种重要的编程语言，用于控制网页的样式和布局。
掌握CSS知识点，能够让我们更好地设计和优化网页，提升用户体验。
本文将介绍一些常见的CSS知识点，以帮助读者更好地理解和应用CSS。
一、CSS选择器CSS选择器用于选择HTML文档中的元素，并为其应用样式。
常见的CSS选择器包括：1. 元素选择器：通过元素名称选择元素。
例如，p选择所有的段落元素。
2. 类选择器：通过class属性选择元素。
例如，.intro选择所有class 为intro的元素。
3. ID选择器：通过id属性选择元素。
例如，#header选择id为header的元素。
4. 后代选择器：选择元素的后代元素。
例如，ul li选择所有ul元素中的li元素。
5. 伪类选择器：用于选择特定状态的元素。
例如，:hover选择鼠标悬停在元素上的状态。
二、盒模型在CSS中，每个元素都被看作是一个矩形的盒子，盒模型由四个部分组成：内容(content)、填充(padding)、边框(border)和外边距(margin)。
1. 内容：元素的实际内容，包括文本和图像等。
2. 填充：元素内容和边框之间的空白区域。
3. 边框：填充区域的边界。
4. 外边距：边框和相邻元素之间的空白区域。
通过CSS中的属性可以调整盒模型的大小、颜色和边框样式等。
三、尺寸和定位1. 宽度和高度：使用width和height属性设置元素的宽度和高度。
2. 相对定位：使用position属性设置元素的定位方式。
常见的定位方式有相对定位(relative)和绝对定位(absolute)。
3. 浮动：使用float属性将元素从正常的文档流中移动，并使其向左或向右浮动。
四、文本样式1. 字体样式：使用font-family属性设置字体样式。
例如，font-family: Arial, sans-serif;设置字体为Arial或者sans-serif。
CSS实现左右布局，三栏布局css的两栏布局是⽐较经典的布局之⼀，⼀般是左（右）边定宽，右（左）边⾃适应。
实现的⽅式也⽐较多，今天主要介绍3种。
1.浮动⽅法，使第⼀个div浮动起来脱离⽂档流，下⾯的div⾃动向上<body><div class="left">左边</div><div class="right">右边</div></body>.left {width: 200px;height: 400px;background: yellow;float: left;}.right{height: 400px;background: #0000FF;}2.绝对定位法此⽅法的原理是将左侧的div设置为position:absolute，右侧默认宽度，并将margin-left设置为和左侧div⼀样宽（如果要留间隙，可以⼤于左侧div宽度）<body><div class="left">左边</div><div class="right">右边</div></body>.left {width: 200px;height: 400px;background: yellow;position: absolute;}.right {height: 400px;background: #ccc;margin-left: 200px;}3.弹性盒。
display:flex; 设置为弹性盒⼦，其⼦元素可以通过设置flex的数值来控制所占空间⽐例<body><div class="left">左边</div><div class="right">右边</div></body><style type="text/css">body{display: flex;}.left {width: 200px;height: 400px;background: yellow;}.right {height: 400px;background: #ccc;flex: 1;}</style>三栏布局三列⾃适应布局指的是两边定宽，中间宽度⾃适应1.绝对定位法原理是将两边absolute定位，因为绝对定位使其脱离⽂档流，后⾯的center会⾃然流动到上⾯，然后使⽤margin属性，留出左右元素的宽度，使中间的元素⾃适应。
8种元素定位方式在进行网页设计的时候，定位是一个非常重要的环节，它关系到网页的美观度以及用户的使用体验。
现在，我们来详细介绍一下8种元素定位方式。
1.静态定位：静态定位是元素在标准文档流中的默认位置。
如果需要对元素进行微调，可以使用top、bottom、left、right来调整元素的位置。
2.相对定位：相对定位是以元素本身为基础进行定位，而不是以文档流为基础。
通过top、bottom、left、right属性可以对元素进行微调。
3.绝对定位：绝对定位是基于父级元素中的位置进行定位的，跟文档流完全脱离。
通过使用top、bottom、left、right属性以及z-index可以调整元素的层级关系和位置。
4.固定定位：固定定位是相对于浏览器窗口来定位的，当用户滚动页面时，这个元素不会随着滚动而改变其位置，而是固定在屏幕的某个位置。
5.浮动定位：浮动元素会脱离文档流，可以向左或向右浮动，直到它的外边缘碰到包含块或者另一个浮动元素的边缘为止。
6.粘性定位：粘性定位是CSS3新增的一种定位方式，它类似于相对定位和固定定位的混合形式。
在滚动到某一位置时，元素会固定在那个位置，直到再次滚动。
7.网格布局：网格布局是CSS3中一种全新的布局方式，可以将元素按照网格进行排列。
通过设置网格行和列以及元素所占的区域，可以达到灵活的布局效果。
8.flex布局：flex布局是CSS3中另一种全新的布局方式，它可以将元素排列在一个弹性盒子中。
通过flex-direction、justify-content、align-items、flex-wrap等属性可以调整弹性盒子中元素的位置和布局方式。
以上就是8种元素定位方式的详细介绍，它们各有优缺点，可以根据不同的需求选择合适的方式进行定位。
在进行网页设计的时候，最好考虑到不同浏览器的兼容性以及移动端的适配。
css属性大全CSS属性大全。
CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的样式表语言。
它可以控制网页的字体、颜色、间距、边框、背景等各种样式，是网页设计中不可或缺的一部分。
在这篇文档中，我们将详细介绍CSS中的各种属性，帮助您更好地掌握CSS的应用。
1. 字体属性。
字体属性用于设置网页中文本的字体样式、大小、粗细等。
常用的属性包括font-family（设置字体系列）、font-size（设置字体大小）、font-weight（设置字体粗细）、font-style（设置字体样式）等。
2. 文本属性。
文本属性用于设置文本的对齐方式、行高、间距等。
常用的属性包括text-align（设置文本对齐方式）、line-height（设置行高）、letter-spacing（设置字符间距）、word-spacing（设置单词间距）等。
3. 背景属性。
背景属性用于设置网页元素的背景样式。
常用的属性包括background-color（设置背景颜色）、background-image（设置背景图片）、background-repeat（设置背景重复方式）、background-position（设置背景位置）等。
4. 边框属性。
边框属性用于设置网页元素的边框样式。
常用的属性包括border-width（设置边框宽度）、border-style（设置边框样式）、border-color（设置边框颜色）、border-radius（设置边框圆角）等。
5. 盒模型属性。
盒模型属性用于设置网页元素的尺寸、内边距、外边距等。
常用的属性包括width（设置元素宽度）、height（设置元素高度）、padding（设置内边距）、margin（设置外边距）等。
6. 定位属性。
定位属性用于设置网页元素的位置。
常用的属性包括position（设置定位方式）、top（设置元素顶部位置）、left（设置元素左侧位置）、z-index（设置元素层级）等。
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
float名词在编写网页时，我们经常会用到浮动元素，这就涉及到一个名词——float。
什么是float？它有什么作用？如何使用它？本文将为你一一解答。
1. float是什么？float是CSS中的一种定位属性，可以将元素从文档流中脱离出来，并沿着容器的左侧或右侧浮动。
这使得元素可以在其他内容周围浮动，从而实现布局的灵活性和多样性。
2. float的作用float主要有两个作用：（1）实现布局：通过float可以将元素从文档流中脱离出来，从而实现更灵活的布局方式。
比如我们可以用float将图片浮动到文本的左侧或右侧，让文章更加美观。
（2）清除浮动：因为float元素脱离文档流，会影响到后面元素的排版。
为了避免这种影响，我们通常要对浮动元素进行清除。
这样可以让后面的元素重新回到文档流中，实现正常排版。
3. 如何使用float通过CSS的float属性，我们可以将元素浮动到左侧、右侧或不浮动。
以下是基本的float语法：```float: none | left | right;```（1）none：表示不浮动，默认值。
（2）left：表示浮动到左侧。
（3）right：表示浮动到右侧。
除了基本语法外，我们还可以使用clearfix清除浮动，使得后面的元素不受浮动元素的影响。
clearfix通常是通过伪元素的方法实现的，如下：```.clearfix::after {content: "";display: table;clear: both;}```上述代码中，通过清除浮动元素后添加一个空的伪元素，然后设置该伪元素的display为table，clear为both，就能实现清除浮动的效果。
4. float的注意事项在使用float时，有一些需要注意的地方：（1）浮动元素的父容器高度塌陷：因为浮动元素被脱离了文档流，如果父容器没有设置高度，那么其高度就会被子元素忽略。
解决这个问题的方法有很多，比如给父容器设置明确的高度、使用overflow:hidden、使用flexbox布局等。
DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。
也就是说，浮动对象的display特性将被忽略。
float属性的参数：none：对象不浮动left：对象浮在左边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：我们看下面的运行效果：Source Code to Run []<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px solid #000; margin:10px; background:#999;} </style></head> <body> <div id="content_a">这是第一个DIV</div> <divid="content_b">这是第二个DIV</div> </body> </html>[ 可先修改部分代码再运行查看效果]我们对content_a应用向左的浮动。
CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。
块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。
块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。
◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。
一个网页就是大型的方框，里面包含着一大堆小方框。
◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。
框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
（顺时针）如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。
让标签悬浮不占高度的方法
让标签悬浮不占高度的方法
在网页开发中，有时我们希望某个标签在悬浮状态下不占用页面的高度，以获得更灵活的布局效果。
以下是一种常见的方法来实现标签悬浮但不占高度的效果：
使用CSS 的position 属性来控制标签的悬浮位置。
具体步骤如下：
1. 选择要实现悬浮效果的标签：
- 首先，选择要实现悬浮效果的标签，可以是`<div>`、`<span>` 或其他HTML 元素。
2. 设置标签的CSS 属性：
- 在CSS 文件或`<style>` 标签中，为该标签设置以下CSS 属性来定义悬浮效果：
- position: 设置为"fixed" 或"absolute"。
- top: 设置距离顶部的偏移量。
- left/right: 设置距离左侧/右侧的偏移量。
3. 调整其他元素的布局：
- 注意，由于设置了标签的悬浮属性，它将不再占用页面布局中的高度。
因此，你可能需要调整其他元素的布局来填补标签悬浮后的空白位置。
通过以上步骤，你可以实现标签的悬浮效果，并且该标签不会占用页面高度。
这样，你可以更加灵活地布局页面，使得悬浮标签不影响其他元素的位置和布局。
请记住，在应用该方法时，你可能需要考虑悬浮标签所在的上下文，并结合其他CSS 规则进行调整以达到最佳效果。
CSS3 动画属性（Animation）keyframes //规定动画。
animation //所有动画属性的简写属性，除了animation-play-state 属性。
animation-name //规定keyframes 动画的名称。
animation-duration //规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function //规定动画的速度曲线。
animation-delay //规定动画何时开始。
animation-iteration-count //规定动画被播放的次数。
animation-direction //规定动画是否在下一周期逆向地播放。
animation-play-state //规定动画是否正在运行或暂停。
animation-fill-mode //规定对象动画时间之外的状态。
CSS 背景属性（Background）background //在一个声明中设置所有的背景属性。
background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS 边框属性（Border 和Outline）border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color //设置下边框的颜色。
border-bottom-style //设置下边框的样式。
css浮动float属性详解⼀、什么是浮动？浮动，顾名思义，就是漂浮的意思。
指的是⼀个元素脱离⽂档流，悬浮在⽗元素之上的现象。
⼆、如何产⽣浮动？给元素本⾝添加float属性float值：left元素向左浮动。
right元素向右浮动。
none默认值。
元素不浮动，并会显⽰在其在⽂本中出现的位置。
inherit规定应该从⽗元素继承 float 属性的值。
三、浮动有什么作⽤？作⽤：在html⽂档流中，分为⾏元素、块元素和⾏内块元素，⾏元素和⾏内块元素都是以横向排列的，⽽块元素则是以流的形式从上往下排列的，当我们想使块元素横向排列时，就⽤到了我们的浮动(float)。
当给⼀个块级元素添加浮动时本来应该竖向排列的元素开始横向排列的，如下图所⽰：.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}.box1 {float: left; width: 100px; height: 100px; background: #000;}.box2 {float: left; width: 100px; height: 100px; background: red; }.box3 {width: 200px; float: left; height: 200px; background: yellow; }.box4 {width: 300px; float: left; height: 300px; background: blue; }.box5 {float: left; width: 300px; height: 400px; background: green;}<div class="box"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> <div class="box4"> box4 </div> <div class="box5"> box5 </div> </div>四、浮动带来的问题当给了⼀个元素浮动时元素脱离⽂档流，会产⽣⼀个致命问题：⽗元素⾼度塌陷(以上⾯的为例⼦):.box {border: 1px solid #666; width: 800px;color: #fff;}.box1 {float: left; width: 100px; height: 100px; background: #000;}.box2 {float: left; width: 100px; height: 100px; background: red; }.box3 {width: 200px; float: left; height: 200px; background: yellow; }.box4 {width: 300px; float: left; height: 300px; background: blue; }.box5 {float: left; width: 300px; height: 400px; background: green;}.on { width: 50px; height: 300px; background: pink; }<div class="box"><div class="box1"> box1 </div><div class="box2"> box2 </div><div class="box3"> box3 </div><div class="box4"> box4 </div><div class="box5"> box5 </div></div><div class="on"> </div>当我不给⽗级元素box添加⾼度时box⾼度为0，并且box的兄弟元素会往上挤；⽽浮动元素将会把⽗级兄弟元素on覆盖：五、如何解决(优缺点)？(1)⽗级div定义 height<style type="text/css">/*解决代码*/.div1{background:#000080;border:1px solid red; height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题。
CSS布局（三）布局模型布局模型在⽹页中，元素有三种布局模型：1、流动模型（Flow）默认的2、浮动模型 (Float)3、层模型（Layer）1、流动模型（Flow）流动（Flow）模型是默认的⽹页布局模式。
也就是说⽹页在默认状态下的 HTML ⽹页元素都是根据流动模型来分布⽹页内容的。
流动布局模型具有2个⽐较典型的特征：第⼀点，块状元素都会在所处的包含元素内⾃上⽽下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以⾏的形式占据位置。
（每⼀个便签都显⽰着⾃⼰本来默认的那个宽⾼）第⼆点，在流动模型下，⾏内元素都会在所处的包含元素内从左到右⽔平分布显⽰。
（内联元素可不像块状元素这么霸道独占⼀⾏）2、浮动模型 (Float)任何元素在默认情况下是不能浮动的，但可以⽤ CSS 定义为浮动div{float:left;} div{float:right;}可以为不同的div设置不同的浮动⽅式来布局。
3、层模型（Layer）层模型有三种形式：1、相对定位(position: relative)2、绝对定位(position: absolute)3、固定定位(position: fixed)相对定位如果想为元素设置层模型中的相对定位，需要设置position:relative（表⽰相对定位），它通过left、right、top、bottom属性确定元素在正常⽂档流中的偏移位置。
相对于以前的位置移动，偏移前的位置保留不动。
在使⽤相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。
绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表⽰绝对定位)，将元素从⽂档流中拖出来，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。
如果不存在这样的包含块（就是它前⾯的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗⼝。
