参考了《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技巧教程中介绍到。

作者: ForEvErNoME
出处: http://www.cnblogs.com/ForEvErNoME/
欢迎转载或分享,但请务必声明文章出处。如果文章对您有帮助,希望你能 推荐 或 关注

 
 
 
 
 

CSS基础(六):浮动深入的更多相关文章

  1. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  2. CSS基础知识---浮动,定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  3. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  4. css基础(浮动 清除f浮动)

    文档流(标准流) 1.元素自上而下,自左而右  2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行   浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...

  5. css基础-float浮动

    float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

  7. CSS基础 清除浮动

    1.单伪元素清除法:清除浮动 .clearfix::after{             content: '.';             display: block;             c ...

  8. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  9. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  10. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

随机推荐

  1. 如何把excel数据导入数据库

    这里介绍2种把excel数据导入oracle数据库的方法. 1. 在excel中生成sql语句. 1)在数据列的右侧,第一行的任何位置输入="insert into table(xx,yyy ...

  2. MongoDB与.NET结合使用二(安全)

    真实的部署环境为了防止外部攻击,肯定是要修改端口和设置用户账号保护数据的安全性,这一篇文章重点来设置这些内容. Mongodb中mongo.exe 是客户端测试程序,mongod.exe为服务器端程序 ...

  3. C++ Primer 变量和基本类型

    <C++ Primer 4th>读书摘要 基本上所有的语言都要提供下列特征: • 内置数据类型,如整型.字符型等. • 表达式和语句:表达式和语句用于操纵上述类型的值. • 变量:程序员可 ...

  4. JAVA软件开发职责

    1.了解OO,AOP,SOA设计模式.J2EE的核心设计模式.应用架构模式和应用集成模式:2.熟练使用Spring.Hibernate/ibatis.Struts等通用性开源框架,并对其原理有深刻的理 ...

  5. ios 学习常用网站

    一 ,别的blog上的内容 iPhone 4 与iPad开发基础教程 一.邮件列表: 1.cocoa-dev http://lists.apple.com/mailman/listinfo/cocoa ...

  6. duilib进阶教程 -- 设置资源路径 (15)

    在前面的教程里,虽然图片都放到了skin文件夹里,但是XML却都在外面,当XML比较多时,就不太好看啦,如下图: 所以需要整理一下,将XML也放入skin文件夹,这样exe的目录就简洁多了: 将XML ...

  7. atitit.表格的绑定client side 最佳实践

    atitit.表格的绑定client side 最佳实践 1. 框架选型 1 2. #---原理和流程 1 1. 方法1 1 2. Dwr 例子 1 3. 方法2 2 4. Jq例如 2 1. 框架选 ...

  8. atitit.java给属性赋值方法总结and BeanUtils 1.6.1 .copyProperty的bug

    atitit.java给属性赋值方法总结and BeanUtils 1.6.1 .copyProperty的bug 1. core.setProperty(o, "materialId&qu ...

  9. atitit.android模拟器使用报告

    atitit.android模拟器使用报告 靠谱助手 仅仅7--15M,只助手,没android模拟器.. BlueStacks新版本App Player采用名为Layercake的技术,可以让针对A ...

  10. paip.最好的脚本语言node js 环境搭建连接mysql

    paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world   .js 2 #---------模 ...