CSS属性(3)-浮动定位
CSS浮动属性Float详解
CSS浮动属性Float详解什么是浮动？浮动是 css 的定位属性。
我们可以看一下印刷设计来了解它的起源和作用。
印刷布局中，文本可以按照需要围绕图片。
一般把这种方式称为“文本环绕”。
这是一个例子：在排版软件里面，存放文字的盒子可以被设置为允许图文混排，或者无视它。
无视图文混排将会允许文字出现在图片的上面，就像它甚至不会在那里一样。
这就是图片是否是页面流的一部分的区别。
网页设计与此非常类似。
在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。
浮动的元素仍然是网页流的一部分。
这与使用绝对定位的页面元素相比是一个明显的不同。
绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。
绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
像这样在一个元素上用CSS设置浮动：#sidebar { float: right; }fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
浮动的用处除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。
浮动对小型的布局同样有用。
例如页面中的这个小区域。
如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。
这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。
清除浮动清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样，向上移动到浮动元素的边界，而是会忽视浮动向下移动。
如下，一图顶千言。
上例中，侧栏向右浮动，并且短于主内容区域。
页脚(footer)于是按浮动所要求的向上跳到了可能的空间。
css不占空间的浮动方法
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相对浏览器窗⼝定位，设置的偏移属性，是相对于浏览器窗⼝的位置。
适⽤于⼴告等意图⼀直出现在⽤户眼
前的信息。
CSS3浮动与定位
✎ 6.3 知识点讲解
1、元素的类型
（2）行内元素 行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同 时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他 行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图 像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面 中文本的样式。 常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
✎ 6.3 知识点讲解
1、元素的类型
（1）块元素 块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自 占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局 和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标记是最典型的块元素。
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
✎
✎ 6.4 知识点讲解
3、相对定位relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
CSS居中浮动元素的使用方法
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选择器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实现左右布局，三栏布局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种元素定位方式在进行网页设计的时候，定位是一个非常重要的环节，它关系到网页的美观度以及用户的使用体验。
现在，我们来详细介绍一下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属性大全。
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（设置元素层级）等。
HTML5+CSS3网站设计浮动与定位
第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。
什么是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属性详解
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框模型、定位、浮动、显示和隐藏
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常用属性大全
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属性详解
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布局（三）布局模型
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元素，即相对于浏览器窗⼝。
CSS 定位
CSS 定位 (Positioning)CSS 定位 (Positioning) 属性允许你对元素进行定位。
属性允许你对元素进行定位。
一、CSS 定位和浮动CSS 为定位和浮动提供了一些属性， 利用这些属性， 可以建立列式布局， 将布局的一部分与另一部分重叠， 还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另 一个元素甚至浏览器窗口本身的位置。
显然， 这个功能非常强大， 也很让人吃惊。
要知道， 用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。
浮动 不完全是定位，不过，它当然也不是正常流布局。
我们会在后面的章节中明确浮动的含义。
一切皆为框div、 h1 或 p 元素常常被称为块级元素。
这意味着这些元素显示为一块内容 即“块框”。
与之相反， 一块内容， span 一块内容 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。
这意味着，通过将 display 属性设置为 block，可以让 行内元素（比如 <a> 元素）表现得像块级元素一样。
还可以通过把 display 设置为 none，让生成的 元素根本没有框。
这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。
这种情况发生在把一些文本添加到一个 块级元素（比如 div）的开头。
即使没有把这些文本定义为段落，它也会被当作段落对待：<div> some text <p>Some more text.</p> </div>在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
CSS：浮动（左浮动、右浮动）
CSS ：浮动（左浮动、右浮动）1、标准流（普通流/⽂档流）标准流就是标签按照规定好的默认⽅式排列（1）块级元素会独占⼀⾏，按照从上到下的⽅式排列（2）⾏内元素会按照顺序，从左到右的顺序进⾏排列，遇到⽗元素则⾃动换⾏（3）纵向排列标准流，横向排列⽤浮动2、浮动的简单应⽤（1）让多个块级元素⽔平排列在⼀⾏（这⾥将⾏内元素转换为了块级元素）可以看出，块元素在显⽰的时候，他们之间会有空隙。
（2）添加浮动<!DOCTYPE html ><html ><head ><meta charset ="utf-8" /><title >test </title ><style type ="text/css">.myclass1{background-color: red;width: 100px;height: 200px;display:inline-block;}.myclass2{background-color:black;width: 100px;height: 200px;display:inline-block;}.myclass3{background-color: red;width: 100px;height: 200px;display:inline-block;}</style ></head ><body ><span class ="myclass1">1</span ><span class ="myclass2">2</span ><span class ="myclass3">3</span ></body ></html ><style type ="text/css">.myclass1{background-color: red;width: 100px;height: 200px;display:inline-block;float: left;}.myclass2{background-color:black;width: 100px;height: 200px;display:inline-block;float: left;}.myclass3{background-color: red;width: 100px;height: 200px;display:inline-block;float: left;}</style>在标准流中不能实现的布局效果，在浮动中就可以很容易地完成，浮动可以改变标签的默认的排列⽅式。
css之bfc原理及应用
css之bfc原理及应⽤1.css的布局技术有哪些？正常布局流display属性弹性盒⼦⽹格浮动定位CSS 表格布局多列布局本⽂重点涉及到三种布局正常布局流（normal flow）正常布局流(normal flow)是指在不对页⾯进⾏任何布局控制时，浏览器默认的HTML布局⽅式。
块盒独占⼀⾏，⾏盒⽔平依次排列浮动（float）把⼀个元素“浮动”(float)起来，会改变该元素本⾝和在正常布局流（normal flow）中跟随它的其他元素的⾏为。
这⼀元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。
绝对定位（absolute positioning）将元素完全从页⾯的正常布局流(normal layout flow)中移出，类似将它单独放在⼀个图层中，因此绝对定位元素不会对其兄弟元素造成影响，⽽元素具体的位置由绝对定位的坐标决定。
2.块级格式化上下⽂（BFC）简介全称Block Formatting Context，简称BFC。
它是⼀个独⽴的渲染区域，它规定了在该区域中，常规流块盒的布局。
什么叫常规流块盒？什么叫独⽴的渲染区域？常规流块盒常规流块盒在⽔平⽅向上，必须撑满包含块常规流块盒在包含块的垂直⽅向上依次摆放常规流块盒若外边距⽆缝相邻，则进⾏外边距合并常规流块盒的⾃动⾼度和摆放位置，⽆视浮动元素和定位元素包含块：每个盒⼦都有它的包含块，包含块决定了盒⼦的排列区域，绝⼤部分的情况下：盒⼦的包含块，为其⽗元素的内容区域（content部分）独⽴渲染区域BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：根元素（html元素创建BFC区域，覆盖了⽹页中所有的元素）浮动和绝对定位元素overflow不等于visible的块盒何为独⽴？独⽴的渲染区域，就是在不同的BFC的区域，它们进⾏渲染时相互不⼲扰。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
现因为用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中非常流行的图层编辑功 能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小 的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其
也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块 状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置（占整行）。 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（一行放多个）
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
注意： 利用overflow：hidden清除浮动时，父元素里面不能有定位超出的元素，如果有，超出 的部分会被隐藏。
第四节 CSS属性（3）
css布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念,但布局模型是建 立在盒模型基础之上。
CSS包含3种基本的布局模型：
• 流动模型（w） • 浮动模型 (Float)
• 层模型（Layer）：定位
流动模型
流动模型是默认的网页布局模式。
• 子元素都浮动，父元素的高度如果没有设置值，则出现撑不开的现象，清除浮动可以 解决
清除浮动
特例： 1、父元素有浮动不需要清除浮动 2、父元素有绝对定位不需要清除浮动
清除浮动
方法1：定高法
给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度。 用于小版块，高度可以写死的部分。
浮动
float：属性定义元素在哪个方向浮动
float:left; float:right; float:none;/*默认值。元素不浮动，并会显示在其在文本中出现的位置*/
注意：
1、任何元素都可以浮动
2、一个盒子里面有一个元素浮动，其他的都得浮动。
浮动的特性
1、浮动元素会去找离它最近的有浮动的元素的边贴。 2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行 3、右浮动会颠倒盒子顺序
• position: fixed; （表示固定定位） • 相对于浏览器窗口进行定位。 • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
定位的使用
绝对定位的元素完全脱离标准流（在文档流中不占位置）。 它完全漂浮在 标准流的上方。 相对定位在文档流中是占有位置的。 不管怎么移动，原来的位置保留。 根据这个特点，我们一般这样使用： 子元素绝对定位，父元素相对定位。
清除浮动
方法4：利用after伪元素清除浮动
清除浮动
visibility:规定元素是否可见 visibility:visible； 默认值，元素是可见的 visibility:hidden ； 元素是不可见的
注意： 做项目时我们常用after伪元素清除浮动，因为它不会额外增加标签，而且不会出
4、行内显示模式的标签加了浮动后，可以直接设置宽高，无需转换。
5、块显示模式的元素，如果没有设置宽度，添加了浮动后，会收缩到内容的大小。 6、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。
清除浮动
clear：规定元素的哪一侧不允许其他浮动元素 clear:both;/*在左右两侧均不允许浮动元素*/ 注意事项：
方便之处的。
页面布局的时候，我们用浮动。局部定位的时候用定位。
不要滥用定位！
方法2：额外标签法
清除浮动
方法3：给浮动元素的父元素添加overflow：hidden
Overflow属性
overflow:规定当内容溢出元素框时发生的事情 overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。 overflow:hidden 内容会被修剪，并且其余内容是不可见的。