CSS基础（六）：浮动深入
参考了《CSS彻底设计研究》的文章，说的很不错，所以拿来做笔记。
浮动
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
CSS中有float属性，默认为none，也就是标准流通常的情况。如果将float属性设置为left或right，元素就会向其父元素的左侧或右侧紧靠，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。
准备代码
先制作一个页面，然后再设置浮动进行分析。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/ } .son2{
/* 这里设置son1的浮动方式*/ } .son3{
/* 这里设置son1的浮动方式*/ } </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
设置第1个浮动div
可以看到标准流中的Box-2的文字在围绕着Box-1排列，此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢？用Firebug可以发现，是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/
float:left;
} .son2{
/* 这里设置son1的浮动方式*/ } .son3{
/* 这里设置son1的浮动方式*/ } </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
设置第2个浮动div
将Box-2的float属性也设置为left，可以看到Box-2也变为根据内容确定宽度，并使Box-3的文字围绕Box-2排列。Box-2的盒子宽度
也是与Box-1的左边框重合，Box-1和Box-2之间的空白是由两者的空白叠加而形成的。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/
float:left;
} .son2{
/* 这里设置son1的浮动方式*/
float:left;
} .son3{
/* 这里设置son1的浮动方式*/ } </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
设置第3个浮动div
可以看到文字会围绕浮动的的盒子排列。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/
float:left;
} .son2{
/* 这里设置son1的浮动方式*/
float:left;
} .son3{
/* 这里设置son1的浮动方式*/
float:left;
} </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
改变浮动的方向
将Box-3改为向右浮动，可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但是文字变成了夹在Box-2和Box-3之间。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/
float:left;
} .son2{
/* 这里设置son1的浮动方式*/
float:left;
} .son3{
/* 这里设置son1的浮动方式*/
float:right;
} </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向右浮动。
再次改变浮动的方向
将Box-2改为向右浮动，Box-3改为向左浮动。布局和上面例子一样。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
} .father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
} .father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
} .father p{
border:1px dashed #111111;
background-color:#ff90ba;
} .son1{
/* 这里设置son1的浮动方式*/
float:left;
} .son3{
/* 这里设置son3 的浮动方式*/
float:left;
} .son2 {
/* 这里设置son2 的浮动方式*/
float:right;
} </style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向左浮动。
清除浮动
使用clear属性清除浮动，设置为left，消除左边浮动的影响；设置为right，消除右边浮动的影响；当设置为both，同时消除左右两边浮动的影响。后面将会在CSS技巧教程中介绍到。
CSS基础（六）：浮动深入的更多相关文章
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- CSS 基础 例子 浮动float
一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
- css基础（浮动 清除f浮动）
文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...
- css基础-float浮动
float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS基础之浮动属性float图文详解
宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”. 标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...
- CSS基础 清除浮动
1.单伪元素清除法:清除浮动 .clearfix::after{ content: '.'; display: block; c ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
随机推荐
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- paip. java resin 远程 调试 java resin remote debug
paip. java resin 远程 调试 java resin remote debug 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 ...
- Android MultiDex兼容包怎么使用？
在Android系统中安装应用的时候,需要对Dex进行优化,但由于其处理工具DexOpt的限制,导致其id的数目不能够超过65536个.而MultiDex兼容包的出现,就很好的解决了这个问题,它可以配 ...
- Mac 安装 home Brew以及 XCTool的过程记录
一.HomeBrew相关: 先对HomeBrew做一个简单的介绍吧,之前了解的也不多. 主要就是用于安装Unix的工具包. 注意:HomeBrew依赖于Xcode的 Command Line Tool ...
- sqlserver数据库安全函数、配置函数、游标函数、行级函数、排名函数、元数据函数、系统统计函数 、文本和图像函数--收藏着有用
行级函数:下列行集函数将返回一个可用于代替 Transact-SQL 语句中表引用的对象. CONTAINSTABLE 返回具有零行.一行或多行的表,这些行的列中包含的基于字符类型的数据是单个词语和短 ...
- Resource annotation is not supported on static fields
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'paramUtil' d ...
- 開啟apache的日誌功能,但是不記錄.js;.css;.jpg;.ico;.png等訪問記錄
維護web伺服器最重要的就是要每天都關注網站的訪問日誌,但是每天面對幾百兆的日誌文件實在是非常頭大,所以可以從根源上給日誌減肥一下,讓日誌只記錄對自己有用的內容就變得非常重了. Nginx伺服器要修改 ...
- 鸡和蛋的OO设计
一个题目:用类图表示出鸡和蛋的关系. 第一版: 第二版: 一个鸡可以下N个蛋,一个蛋可以浮出0或者1个鸡. 问题是公鸡不会下单,第三版:
- Android——GridView（网格视图）相关知识总结贴
Android API中文文档GridView http://www.apkbus.com/android-14131-1-1.html Android API 中文 (15) —— GridVi ...
- discuz 使用阿里云OSS
discuz 使用阿里云OSS (转)http://bbs.aliyun.com/read/239257.html 说明:我绑定了二级域名,本演示采用二级域名oss来介绍,我实际使用的是二级域名pic ...