基于CSS盒子模型float属性解析
CSS浮动属性Float详解
CSS浮动属性Float详解什么是浮动？浮动是 css 的定位属性。
我们可以看一下印刷设计来了解它的起源和作用。
印刷布局中，文本可以按照需要围绕图片。
一般把这种方式称为“文本环绕”。
这是一个例子：在排版软件里面，存放文字的盒子可以被设置为允许图文混排，或者无视它。
无视图文混排将会允许文字出现在图片的上面，就像它甚至不会在那里一样。
这就是图片是否是页面流的一部分的区别。
网页设计与此非常类似。
在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。
浮动的元素仍然是网页流的一部分。
这与使用绝对定位的页面元素相比是一个明显的不同。
绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。
绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
像这样在一个元素上用CSS设置浮动：#sidebar { float: right; }fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
浮动的用处除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。
浮动对小型的布局同样有用。
例如页面中的这个小区域。
如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。
这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。
清除浮动清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样，向上移动到浮动元素的边界，而是会忽视浮动向下移动。
如下，一图顶千言。
上例中，侧栏向右浮动，并且短于主内容区域。
页脚(footer)于是按浮动所要求的向上跳到了可能的空间。
CSSfloat属性
CSSfloat属性
表⽰向左浮动，⽐如多个div在⼀个页⾯上，默认情况是：⼀⾏⼀个div，但是只要在div的中使⽤float：left，可以使⼀⾏有多个div，这样可以把⽹页划分成很多块，但是使⽤该属性会影响后⾯的元素，所有如果后⾯的div不想再被影响，可以使⽤clear:both；可以理解为清除float:left和float:right的影响，返回到默认状态。
像<ul><li></li></ul>也可以这么使⽤，做导航菜单基本上有这个元素,使⽤float:left使其横向显⽰。
如果浮动⾮替换元素，则要指定⼀个明确的宽度；否则，它们会尽可能地窄。
注释：假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏，这个过程会持续到某⼀⾏拥有⾜够的空间为⽌。
值描述
left元素向左浮动
right元素向右浮动
none默认值。
元素不浮动，并会显⽰在其在⽂本中出现的位置
inherit规定应该从⽗元素继承 float 属性的值。
浮动元素(float)
浮动元素（float）我们可以通过CSS属性float令元素向左或向右浮动。
也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。
下图阐明了其原理：举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：如何实现这个效果？上例的HTML代码如下所示：<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><p>causas naturales et antecedentes,idciro etiam nostrarum voluntatum...</p>要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可：#picture {float:left;width: 100px;}显示示例另一个例子：列浮动也可以用于实现在文档中分列。
要创建多个列，你需要在HTML代码里用div来结构化想要的各个列：<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes,idciro etiam nostrarum voluntatum...</p></div><div id="column3"><p>nam nihil esset in nostrapotestate si res ita se haberet...</p></div>下面，我们把各列的宽度设定为“33%”，并通过定义float属性令各列向左浮动：#column1 {float:left;width: 33%;#column2 {float:left;width: 33%;}#column3 {float:left;width: 33%;}显示示例float属性的值可以是left、right或者none。
CSS之float属性归纳探讨
CSS之float属性归纳探讨相信很多同学在学习CSS的float属性时，会有很多说不清道不明的⼩情绪，我也遇到⼀些，暂且mark⼀下。
以下内容分为如下⼩节：1：float属性2：float属性的特性 2.1：float之⽂字环绕效果 2.2：float之⽗元素⾼度塌陷3：清除浮动的⽅法 3.1：html法 3.2：css伪元素法4：float去空格化5：float元素块状化6：float流体布局 6.1：单侧固定 6.2：DOM与显⽰位置不同的单侧固定 6.3：DOM与显⽰位置相同的单侧固定 6.4：智能布局1：float属性float，顾名思义是漂浮，浮动的意思。
但是在css中，它被理解成浮动。
float有四个属性，即1 float:none;2 float:left;3 float:right;4 float:inherit;⽐较常⽤的两个属性值是左浮动和右浮动。
在接下来的分享中，只会拿左浮动作为例⼦。
其他浮动属性值与左浮动原理相同。
2：float属性的特性 2.1：float之⽂字环绕效果浮动的初衷就是为了⽂字环绕效果。
看如下代码和demo。
1 <div class="container">2 <div class="content"></div>3 <p>4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!H5 </p>6 </div>1 .container {2 width: 300px;3 height: 300px;4 border: 1px solid black;5 }6 .container .content {7 float: left;8 width: 150px;9 height: 150px;10 background-color: lightpink;11 margin: 5px;12 }content 元素设置了左浮动，使div元素脱离⽂档流，⽂字在其周围坏绕显⽰。
盒子的浮动与定位
主讲：毛丽娟
盒子的浮动-float属性
css1中首先提出浮动的概念。 float属性的设置会打破原标准流中盒子的默 认布局方式。 浮动不完全是定位，也不是标准流。
案例1-页面效果
制作一个包含4个div块（其中一个父块，三 个子块）的基础页面，页面效果如下：
案例1-结构代码
float小结
标准流布局
浮动后的布局
分析：在标准流中，即使设置了盒子的较小尺寸，块级元素依然遵循标准流 默认的布局规则；当出现浮动元素后，被浮动的框1脱离了标准流，原先在父 元素中占据的标准流空间也随之关闭（如果父盒子是未设置高度的，此时会 发现父盒子的高度也随之减小）。
float小结-浮动元素的叠放次序
案例3-static定位
下面是没有设置任何position属性的页面效果， 相当于使用static方式。
案例3-样式代码
body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; }
案例-两栏布局样式代码
.news { p标记的float属性 background-color: gray; 值也可以改成left； border: solid 1px black; 如果没有width属 } 性将会出现p标记 .news img { 内容被img内容挤 到下一行。 float: left; } .news p { float: right; width:70%; margin-left:10px; } .clear { clear: both; }
CSS中的浮动属性有什么作用如何清除浮动
CSS中的浮动属性有什么作用如何清除浮动在网页设计和开发中，CSS（层叠样式表）是不可或缺的一部分，它赋予网页丰富的样式和布局。
其中，浮动属性是一个非常重要且常用的特性，但同时也可能带来一些布局上的问题，需要我们掌握清除浮动的方法来解决。
首先，我们来了解一下浮动属性的作用。
浮动属性主要用于实现文字环绕图片、多列布局等效果。
当我们为一个元素设置`float:left`或`float:right`时，这个元素就会脱离文档流，向左或向右浮动。
比如说，我们有一张图片和一段文字，如果我们想让文字环绕图片显示，就可以将图片设置为浮动。
这样，文字就会自动环绕在图片的周围，而不是在图片的下方。
这在实现一些复杂的页面布局时非常有用，比如侧边栏、导航栏等。
另外，浮动还可以用于创建多列布局。
我们可以将多个元素设置为浮动，并通过控制它们的宽度，来实现类似于报纸排版的多列效果。
然而，浮动属性在带来便利的同时，也可能引发一些问题。
如果一个父元素内部的子元素都设置了浮动，而父元素没有设置合适的样式来处理这些浮动元素，就可能导致父元素的高度无法自适应子元素的内容，从而影响页面的布局。
接下来，我们来看看如何清除浮动。
常见的清除浮动的方法有以下几种：1、额外标签法在浮动元素的后面添加一个空的标签，例如`＜div style=＂clear:both;＂＞＜／div>｀。
其中`clear:both`的作用是清除左右两侧的浮动，使后面的元素不再受到前面浮动元素的影响。
这种方法简单直接，但会增加额外的无意义标签，不太符合代码的简洁性原则。
2、使用`overflow`属性可以为浮动元素的父元素设置`overflow:hidden`或`overflow:auto`。
这种方法的原理是通过触发 BFC（块格式化上下文）来实现清除浮动的效果。
BFC 是一个独立的渲染区域，内部的布局不会影响到外部，从而达到清除浮动的目的。
但需要注意的是，使用`overflow:hidden`可能会隐藏掉超出父元素范围的内容，所以在使用时需要谨慎。
CSS Float(浮动)总结
清除浮动 - 使用 clear
• 元素浮动ቤተ መጻሕፍቲ ባይዱ后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
• clear 属性指定元素两侧不能出现浮动元素。 • .text_line •{ • clear:both; •}
CSS 中所有的浮动属性
CSS Float(浮动)
什么是 CSS Float（浮动）？
• CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素 也会重新排列。
• Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含
框或另一个浮动框的边框为止。 • 浮动元素之后的元素将围绕它。 • 浮动元素之前的元素将不会受到影响。
实例
• img •{ • float:right; •}
彼此相邻的浮动元素
• 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼 此相邻。
• .thumbnail •{ • float:left; • width:110px; • height:90px; • margin:5px; •}
DIV和CSS浮动（float,clear）的布局详解
DIV和CSS浮动（float,clear）的布局详解写在前面的话：由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。
如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。
小菜水平有限，本文仅仅是入门教程，不当之处请谅解！本文以div元素布局为例。
教程开始：首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
如下图：可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。
注意，以上这些理论，是指标准流中的div。
小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
显然标准流已经无法满足需求，这就要用到浮动。
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。
如图：从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。
又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。
这里的靠左、靠右是说页面的左、右边缘。
如果我们把div2采用右浮动，会是如下效果：此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。
目前为止我们只浮动了一个div元素，多个呢？下面我们把div2和div3都加上左浮动，效果如图：同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。
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应用向左的浮动。
CSSfloat详解
CSSfloat详解前⾔：在我们写CSS样式的时候，float,position,display,overflow这⼏个关键字⽤得⽐较多。
弄清楚他们之间的原理，我们可以更⾼效的写出我们想要的布局。
作者：Ry-yuan⼀、float1.什么是浮动：在我们布局的时⽤到的⼀种技术，能够⽅便我们进⾏布局，通过让元素浮动，我们可以使元素在⽔平上左右移动，再通过margin属性调整位置2.浮动的原理：使当前元素脱离普通流，相当于浮动起来⼀样，浮动的框可以左右移动，直⾄它的外边缘遇到包含框或者另⼀个浮动框的边缘3.浮动的⽣成：使⽤css属性float：left/right/none 左浮动/右浮动/不浮动（默认）4.浮动的影响： 对附近的元素布局造成改变，使得布局混乱 浮动后的元素可以设置宽度和⾼度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与⾏内元素的特征 因为浮动元素脱离了普通流，会出现⼀种⾼度坍塌的现象：原来的⽗容器⾼度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那⽗容器的⾼度就坍塌（前提是⽗容器⾼度⼩于A元素⾼度），下⾯⽤图来说明⼀下⾼度坍塌：5.清除浮动与闭合浮动 先说说我个⼈的理解：我将解释⼀下我理解的闭合浮动与清除浮动 清除浮动：使⽤clear元素清除外⾯浮动，解决外⾯浮动对⾃⼰的影响 闭合浮动：当前块级中，其⼦元素使⽤了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最⼤化清除。
举个例⼦: ex:<style type="text/css">.box1{width: 200px;border: 2px solid #0f0;/*overflow: hidden;*/}.box1 .child-1{float: left;height: 100px;width: 100px;background: #fd0;}.box1 .child-2{float: left;height: 100px;width: 100px;background: #fba;}.box2{width: 200px;height: 150px;border: 2px solid #00f;/* clear: both; */}</style><body><div class="box1"><div class="child-1">child-1</div><div class="child-2">child-2</div></div><div class="box2"></div></body>图⼀：原始图图⼆：child-1 和 child-2 进⾏浮动图三:区分清除浮动与闭合浮动（个⼈理解：在外⾯解决问题，内部问题未解决）清除浮动：对box2使⽤：clear：both图四：闭合浮动（在内部解决问题：同时解决外部问题）闭合浮动：对box1使⽤overflow：hidden（其中⼀种⽅式，后⾯还有更好的⽅式）因此我更愿意称其为闭合浮动:其实也可以叫清除浮动，不过我就是觉得闭合浮动⽐较形象。
cssfloat属性
cssfloat属性CSSfloat属性是一种布局方法，用于将元素浮动在其它元素之上，以达到布局和可视效果的目的。
float属性最初由W3C提出，用于控制文本排版时像把文本环绕框一样，在指定位置环绕其它元素。
float属性最常用于把图片放到文字中，让图片封装在文字中，并且文字自动环绕图片，而且不影响文字的排版，这就是float的最初的应用。
CSS的float属性字面意思是“浮动”，它的作用是让元素在页面中可以浮动起来，而不是像以往那样只能按照一定的顺序排列显示。
float的语法：float: left | right | none | inherit；其中left和right用于指定元素的浮动方向，none用于取消元素的浮动，而inherit表示继承父元素的float属性。
float属性的四个基本特性：1、元素浮动后，会从文档流中抽出，相当于从文档流中删除，它原来所在的位置会被其它元素所取代；2、浮动元素可以设置定位，并且可以让元素向左或者向右移动；3、浮动元素后面的元素会紧跟其后，就像浮动元素不存在一样；4、浮动元素可以设置margin，padding和border。
float的三种应用：1、使用float可以实现文字环绕图片的效果：把图片设为float，文字会自动环绕图片，并且不影响文字的排版；2、使用float可以控制文字和其他元素的排列顺序：如把文字设为float，它会移动到其它元素的左边或者右边，而不再按照文档流的顺序排列；3、行内元素的浮动：float可以让行内元素变成块级元素，这样就能设置宽高、margin、padding、border等样式。
float属性的注意点：1、浮动元素会导致文档的高度塌陷：如果父元素里有子元素浮动，父元素的高度就不会被子元素占据，因此就会出现文档高度塌陷的情况；2、浮动元素会影响页面布局：如果页面中有多个浮动元素，它们会相互影响，有可能会导致整页面的布局出现偏差；3、float不要过多：浮动元素会对页面性能产生影响，尽量不要让太多元素浮动，以免引起性能问题；4、clear应该与float相结合：要想避免文档塌陷，应尽量使用clear来消除浮动元素对文档高度的影响；5、float不要用于表格元素：Float是用来布局块级元素的，用于表格元素，它只能把表格元素变成文档流中的块级元素，但无法让表格元素按照float设置的位置浮动，因此应避免使用float来布局表格元素。
CSS中的float属性
CSS中的float属性在上⼀节中提到过⾏内块元素（inline-block），display设置为inline-block后，元素可以设置宽度和⾼度，⼜能以⾏内形式显⽰，即⽔平排列，⽽不是像块级元素⼀样从上到下排列。
这⼀点很好地解决了页⾯的布局问题。
inline-block不是唯⼀，还有⼀个float浮动属性也能够到达类似的效果。
float分为左浮left和右浮right，会让元素脱离⽂档流，且⼦级浮动会导致⽗级⾼度塌陷（⽗级可使⽤overflow：hidden属性恢复⾃⾝⾼度）。
下⾯举例说明float实现的布局效果。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>.div-all{width: 200px;height:200px;background-color: grey;}.div-left{width: 100px;height:200px;/*float: left;*/background-color: pink;}.div-right{width: 100px;height:200px;/*float: right;*/background-color: coral;}</style><body><div class="div-all"><div class="div-left"></div><div class="div-right"></div ></div></body></html>定义⼀个区域div-all⽤灰⾊表⽰，想要把它左右平分div-left和div-right，分别⽤粉⾊和橘⾊表⽰，div是块级元素，所以粉⾊区域和橘⾊区域垂直排列，并不能实现上述左右平分的效果。
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网页布局之float属性
深入理解CSS网页布局之float属性在CSS网页开发布局中，需要对浮动和定位有深刻的理解才能在开发中游刃有余。
基于此，做了本篇总结，这些总结来自实践经验和阅读一些书籍后的理解总结，主要内容为浮动，清除浮动，定位。
一、float属性深入理解首先简单布局一下，代码如下：效果图：图p11、脱离文档流脱离文档流，即在元素原来的位置中脱离出来，可以理解为漂浮起来，但是要注意一些细节。
细节一:若浮动元素后面有不浮动的元素，那么其后面不浮动的元素会把浮动元素视为消失，然后顶到它的位置中。
我们来测试一下：对第二个div（id=box2）设置浮动，观察第三个div的位置.效果图:图p2我们可以看到第三个div顶到浮动div原来的位置上去了，这里的float：left 设置为right，也同样，即第二个div消失了，后面的顶上去。
效果图:图p3细节二我们不能理解为设置float之后，这个元素就完全漂浮在没有设置float元素的上面，虽然在细节一中的效果图中看是漂浮在上面（2在3的上面）。
这个细节就是浮动只对后面的元素造成影响（所谓影响，就是后面的元素把它视为消失），对于排在它前面的同级块元素，不会对其位置造成影响。
（即如果前面的同级块元素没有设置浮动，那么它也不会漂浮到这个元素的上面）。
细节一的p1例子已经验证了这一特性（2还是在1的下面）。
那么，对于排在前面的同级内联元素呢？对于同级内联元素，设置了float属性的元素与前面的内联元素属于同一层面，而且优先级高于前面的同级内联元素，这里的优先级指位置优先级，比如float：left，那么前面的内联元素如果原来占据最左边，那么它由于优先级低于浮动元素，所以它就会让位与浮动元素，排在浮动元素的右边。
我们来看一下测试代码（重点查看注释的测试内容）：效果图:图p4分析：对于1（这里用数字代表相应的div，上下同）来说，由于排在浮动的2的前面，所以它无论是否为块元素，都和2属于同一层面，再由于它不是块元素，所以它的位置优先级别低于2，由于2的float：left，向左浮动，所以它靠最左，1被挤到它的右边。
盒子模型float写盒子的竖线
盒子模型float写盒子的竖线
摘要：
1.盒子模型简介
2.float 属性的作用
3.编写盒子的竖线样式
4.总结
正文：
盒子模型是网页布局中的一个重要概念，它描述了页面元素如何布局和定位。
在盒子模型中，元素可以设置宽度和高度，内边距和外边距等属性。
float 属性是盒子模型中的一个重要属性，它可以使元素向左或向右移动，直到碰到父级元素或另一个浮动元素。
float 属性的语法如下：
```
E {
float: left|right|none;
clear: left|right|both;
}
```
其中，left 表示元素向左浮动，right 表示元素向右浮动，none 表示元素不浮动。
clear 属性用于指定浮动元素之后是否可以清除浮动，以便父级元素可以正确地计算高度。
在实际应用中，盒子的竖线样式可以通过float 属性实现。
例如，我们可以创建一个div 元素，设置宽度、高度和内外边距，然后通过float 属性设置为向左浮动，如下所示：
```
<div style="width: 100px; height: 100px; background-color: red; float: left;"></div>
```
这样，我们就得到了一个红色的盒子，它的竖线样式由float 属性控制。
通过调整float 属性的值，我们可以实现盒子的竖线在不同方向上的移动。
总之，盒子模型中的float 属性是一个非常实用的功能，它可以帮助我们轻松地实现盒子的竖线样式。
float css用法
float css用法
CSS中的float属性用于指定一个元素的浮动方式，即元素相
对于其容器的浮动位置。
float属性有以下几种用法：
1. float: left;：指定元素向左浮动，将元素放到容器的左侧，其他内容将围绕在其右侧。
2. float: right;：指定元素向右浮动，将元素放到容器的右侧，
其他内容将围绕在其左侧。
3. float: none;（默认值）：不浮动元素，元素将按照文档流的
顺序排列，不会影响其他元素的位置。
4. float: inherit;：继承父元素的浮动方式。
浮动元素会脱离普通文档流，浮动后的元素不再占据原有位置，如果浮动的元素与其他元素重叠，则会根据元素的顺序进行覆盖。
浮动元素可能会造成容器塌陷，即容器的高度塌陷为0。
这时
可以通过清除浮动来解决，可以使用clear属性来清除前面的
浮动。
例如，设置clear: both; 可以清除前面的左浮动和右浮动。
详解cssfloat属性
详解cssfloat属性⼀、什么是float? 在css中float就是浮动的意思，简单来说，就是让元素浮动起来。
如何理解？我们把⽹页想象成是拼图的底板，⾥⾯的元素就是⼀个个⼩的拼图块，所谓浮动就是让本来应该贴着拼图底板的块起来，这就是浮动，也是所谓的脱离⽂档流。
标准⽂档流就是拼好的拼图。
⼆、使⽤float的结果？ 我们先定义3个div1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Document</title>7<style>8 #son1{9 width: 100px;10 height: 100px;11 background-color: burlywood;12 }13 #son2{14 width: 200px;15 height: 200px;16 background-color: rgb(196, 222, 135);17 }18 #son3{19 width: 300px;20 height: 300px;21 background-color: rgb(135, 173, 222);22 }23</style>24</head>25<body>26<div id="parent">27<div id="son1">son1</div>28<div id="son2">son2</div>29<div id="son3">son3</div>30</div>31</body>32</html>现在我们给son1设置floatfloat: left;//让元素向左浮动我们会看到，son2跑到了本应属于son1的位置，这就是上⾯所说的脱离⽂档流。
day044CSS相关属性之盒子模型、float浮动、overflow溢出属性、posit。。。
day044CSS相关属性之盒⼦模型、float浮动、overflow溢出属性、posit。
本节内容：CSS相关属性21、CSS盒⼦模型2、float浮动3、overflo溢出属性4、position（定位）⼀、CSS盒⼦模型1、margin：外边距，控制元素间的距离，整个模型实际占的⼤⼩；2、border：边框，⽂字的边框，在内边距和外边距之间；3、padding：内边距，内容到边框的距离；4、content：内容，盒⼦的内容，显⽰⽂本和图像。
1、margin外边距的写法1、普通写法：.margin-test{ # 选择器选择这个margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;}⼀般浏览器会默认给加上⼀个margin，所以我们⼀般写CSS样式的时候，都会先写⼀个body的上下左右的margin都设置为0.2、如果将上下两个标签都设置了margin是什么效果3、推荐使⽤简写：顺序：上右下左.margin-test {margin: 5px 10px 15px 20px;}4、常见居中：.mycenter {margin: 0 auto; #上下0像素，左右⾃适应，居中的效果}如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为102、padding内填充写法跟margin相同：.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;}1、推荐使⽤简写：顺序：上右下左.padding-test {padding: 5px 10px 15px 20px;}补充padding的常⽤简写⽅式：提供⼀个，⽤于四边；提供两个，第⼀个⽤于上－下，第⼆个⽤于左－右；如果提供三个，第⼀个⽤于上，第⼆个⽤于左－右，第三个⽤于下；提供四个参数值，将按上－右－下－左的顺序作⽤于四边；⼆、float浮动脱离了标准⽂档流，1、写法.div1{float: left;}三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动先后顺序，⼀般按html写的顺序排，也可以⾃⼰写左右效果：2、标签浮起后，出现的副作⽤浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。
基于CSS盒子模型float属性解析
基于CSS盒子模型float属性解析
蒋昀昕
【期刊名称】《电脑与电信》
【年(卷),期】2015(000)004
【摘要】本文介绍了盒子模型与标准文档流的概念，阐述了盒子在标准流中的定位原则。
重点解析了CSS中的浮动属性，并通过具体的网页布局实例进一步说明浮动属性的用法。
%This paper introduces the conception of box-model and normal document stream, and states the position principle of box in normal document stream. It analyzes the float attribute of CSS, and gives the method of using float by specific case.
【总页数】3页(P60-62)
【作者】蒋昀昕
【作者单位】福建卫生职业技术学院公共基础部，福建福州 350101
【正文语种】中文
【中图分类】TP311
【相关文献】
1.基于CSS盒子模型的margin属性解析 [J], 殷卫莉
2.CSS盒子模型定位方法解析 [J], 黄雪琴;耿强
3.基于CSS盒子模型的Margin属性研究 [J], 黄雪琴;耿强
4.DIV＋CSS应用中的float和clear属性浅谈 [J], 黄超黎;史章君
5.基于\"DIV+CSS\"盒子模型的网页布局初探 [J], 钟金成
因版权原因，仅展示原文概要，查看原文内容请购买。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
— — ． 。
应 用｜ 吏术 与 研 究
——
】 ． ． 一
——— — —
—
— — ——…
—
１ ． ＿
———一
｝
中设置块 的ｗｉ ｄ ｔ ｈ 属性和 ｆ ｌ ｏ ａ ｔ 属性， 代码如下 ：
＃ Ｔ ｏ ｐ Ｄ ｉ ｖ ｌ｛
ｌ ｆ ｏ ａ ｔ ： ｌ ｅ ｔ； ｆ ｗｉ ｄ ｔ ｈ： ２ ０ ０ ｐ ｘ ；
【 Ａ ｂ ｓ ｔ ｒ ａ ｃ ｔ 】 Ｔ ｈ ｉ ｓ ｐ ａ ｐ ｅ ｒ ｉ ｎ ｔ ｒ ｏ ｄ ｕ ｃ ｅ ｓ ｔ ｈ ｅ ｃ ｏ ｎ ｃ ｅ ｐ ｔ ｉ ｏ ｎ ｏ ｆ ｂ ｏ ｘ — ｍ ｏ ｄ ｅ ｌ ａ ｎ ｄ ｎ ｏ ｒ ｍ ａ ｌ ｄ ｏ ｃ ｕ ｍ ｅ ｎ ｔ ｓ ｔ ｒ ｅ ａ ｍ ， ａ ｎ ｄ ｓ ｔ ａ ｔ ｅ ｓ ｔ ｈ ｅ ｐ ｏ ｓ ｉ ｔ ｉ ｏ ｎ ｐ ｒ ｉ ｎ ｃ ｉ ｐ ｌ ｅ ｏ ｆ
对 于中间部分＃ Ｓ ｅ ａ ｒ ｃ ｈ Ｄｉ ｖ的设置仍是 采用左浮动 ， 并且 宽度设 置为 １ ０ ０ ％。 由于 五个子版 块都 是浮动 元素 ， 并 且根
据 浮 动 元 素 的排 列 特 点 （ 紧靠着排 列） ， 如 果 要 实 现 上 中 下 的 排列 结构 ， 版 块 的 ｗｉ ｄ ｔ ｈ属 性 设 置 要 特 别 注 意 。 所 以 ， ＃ Ｌ ｅ ｔ ｆ ． Ｄｉ ｖ ｌ 的宽度 设置 为 ６ ９ ％， ＃ Ｒ ｉ ｇ ｈ ｔ Ｄｉ ｖ ｌ 的宽度 为 ２ ９ ％， 这 样 使
ｂ ｏ ｘ ｉ ｎ ｎ ｏ ｍ ａ ｒ ｌ ｄ ｏ ｃ ｕ ｍｅ ｎ ｔ ｓ ｒｅ ｔ ａ ｍ． Ｉ ｔ ａ ｎ ｔ ｒ ｉ ｂ ｕ ｔ ｅ ｏ ｆ ＣＳ Ｓ ， ａ ｎ ｄ ｇ ｉ ｖ ｅ ｓ ｈｅ ｔ ｍｅ ｔ ｈ ｏ ｄ ｏ ｆ ｕ ｓ ｉ ｎ ｇ ｌ ｆ ｏ ａ ｔ ｂ ｙ ｓ ｐ ｅ ｃ ｉ ｉｃ ｆ ｃ ａ ｓ ｅ ．
具体的网页布局实例进一步说明浮动属性的用法 。
｝ ＃ Ｒ ｉ ｇ ｈ ｔ Ｄ ｉ ｖ ｌ｛
ｌ ｆ ｏ ａ ｔ ： ｒ ｉ ｇ ｈ ｔ ；
参考文献 ：
［ １ ］ Ｃ ｈ ａ ｌ ｒ ｅ ｓ Ｗｙ ｋ ｅ — Ｓ ｍｉ ｔ ｈ ． ｃ ｓ ｓ － ￣ ． 计 指 南（ 第３ 版） ［ Ｍ］ 北 京 ： 人 民邮 电
【Ｋ ｅ ｙ ｗ ｏ ｒ ｄ ｓ】 Ｃ Ｓ Ｓ ； ｌ ｆ ｏ ａ ｔ ； ｂ ｏ ｘｍｏ ｄ ｅ ｌ ； ｎ ｏ ｒ ｍａ ｌ ｄ ｏ ｃ ｕ ｍｅ ｎ ｔ ｓ ｒ ｔ ｅ ａ ｍ
．
６ ２．
出版 社 ． ２ ０ １ ３ ．
ｈ ｅ ｉ ｇ ｈ ｔ ： １ ５ ０ ｐ ｘ ； ｗｉ ｄ ｔ ｈ ： ２ ９ ％：
［ ２ ］ 温谦
ｃ ｓ ｓ ｉ ￣ 计彻 底研 究 【 Ｍ］ ． 北京 ： 人 民 邮电 出版社 ， ２ ０ ０ ８ ．
Ａｎａ ｌ ｙ ｓ ｉ ｓ ｏ ｆ Ｆｌ ｏ ａ ｔ Ａｔ ｔ ｒ ｉ ｂ ｕ ｔ ｅ Ｂａ ｓ ｅ ｄ ｏ ｎ ＣＳＳ Ｂｏ ｘ Ｍｏ ｄ ｅ ｌ
）
＃ Ｔ ｏ ｐ Ｄｉ ｖ ２｛
ｌ ｆ ｏ ａ ｔ ： ｒ ｉ ｇ ｈ ｔ ；
得两 个版 块 的宽度加 起来 恰好 是父 版块＃ Ｍａ ｉ ｎ Ｄｉ ｖ的宽度 。 而＃ Ｓ ｅ ａ ｒ ｃ ｈ Ｄ ｉ ｖ的宽度 设置为 １ ０ ０ ％， 即和父版块 同宽 ， 所 以无
法￣ Ｉ ＃ Ｌ ｅ ｆ ｔ Ｄ ｉ ｖ １ 、 ＃ Ｒｉ ｇ ｈ ｔ Ｄｉ ｖ ｌ 排 列 在 同一 行 ， 只 能下 移 一行 。 同理 ， 由于 ＃ Ｓ ｅ ａ ｒ ｃ ｈ Ｄｉ ｖ占据 了 整 行 的 宽 度 ， ＃ Ｌ ｅ ｔ ｆ Ｄｉ ｖ ２ 、 Ｒ ｉ ｇ ｈ ｔ ．
ｌ ｆ ｏ ａ ｔ ： ｌ ｅ ｔ ｆ ； ｈ ｅ ｉ ｇ ｈ ｔ ： １ ５ ０ ｐ ｘ ； ｗｉ ｄ ｔ ｈ ： ６ ９ ％；
Ｄｉ ｖ ２ 也必须下移一行排列 ， 从而实现 了上 中下的布局结构 。
６ 结 语
本文介绍 了盒子模型 与标 准文档流 的概念 ， 阐述 了盒子
在 标 准 流 中 的定 位 原 则 。 解 析 了 Ｃ Ｓ Ｓ中 的浮 动 属 性 ， 并 通 过
ｗｉ ｄ ｔ ｈ ： ２ ０ ０ ｐ ｘ ；
｝
中间版块＃ Ｍａ ｉ ｎ Ｄ ｉ ｖ 包含 五个 浮动 的子版块 ， 其 中＃ Ｌ ｅ ｔ ｆ ．
Ｄｉ ｖ ｌ ￣ ｌ ＃ Ｒ ｉ ｇ ｈ ｔ Ｄｉ ｖ １ 的设置可参照项 部嵌套的子版块 ， 同理 可 设 ￣＃ Ｌ ｅ ｆ ｔ Ｄｉ ｖ ２ 和Ｒ ｉ ｇ ｈ ｔ Ｄｉ ｖ ２ 版 块 。部 分 代 码 如 下 ： ＃ Ｌ ｅ ｆ ｔ Ｄｉ ｖ ｌ ｛
Ｊ ｉ ａ ｎ ｇ Ｙ ｕ ｎ Ｘｉ ｎ
（ Ｄｅ ｐ ａ ｒ ｔ ｍｅ ｎ ｔ ｏ ｆ Ｐ ｕ ｂ ｌ ｉ ｃ Ｂ ａ ｓ ｉ ｃ ， Ｆ ｕ ｊ ｉ ａ ｎ ｇ Ｍｅ ｄ ｉ ｃ ａ ｌ Ｃ ｏ ｌ ｌ ｅ ｇ ｅ ， Ｆ ｕ ｚ ｈ ｏ ｕ ３ ５ ０ １ ０ １ ， Ｆ ｕ ｊ ｉ ａ ｎ ｇ ）