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

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

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属性 ...

随机推荐

Flex开发一周年感悟
优点: 1.Flex上手简单,与html和js很像,是一种web前端语言,对于简单的界面.图表.交互都有不错的封装.它能够让新手在短时间内开发出比较有模样的项目. 2.有很多第三方api可以使用,如a ...
why add \n to http response.responseText
这是今天我们公司线上出现的问题,http response 的信息,都添加了一个\n换行,我找了好久呢才发现,我把php页面的结束符?>去掉之后,一切正常,这个?>,我平时也是很少加上的 ...
Nginx学习笔记（三） Nginx基本数据结构
Nginx基本数据结构话说学习一种编程语言,例如C语言,我们首先学的也是数据结构,这是以后开发程序的关键.为了更好更方便的开发Nginx,Nginx自己实现了很多适合nginx的数据结构. Ngin ...
[游戏模版21] Win32 物理引擎能量守恒
>_<:Only a little change in the function of MyPaint(...),besides the initial value have some c ...
Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
使用Jekyll官方的ReadMore摘要功能
今天才发现,Jekyll官方就支持ReadMore摘要功能,记录一下. 我之前的方法,在index.html中 {{ post.content ||split:' ...
[BTS] The value "" for the property InboundId is invalid
Microsoft.ServiceModel.Channels.Common.MetadataException: Retrieval of Operation Metadata has failed ...
SublimeText2 快捷键一览
ctrl+shift+w: 关闭Sublime,关闭所有打开文件ctrl+n: 新建文件ctrl+s: 保存ctrl+shift+s: 另存为ctrl+f4: 关闭文件ctrl+w: 关闭f11: 切 ...
AdaBoost算法简介
一.AdaBoost的损失函数 AdaBoost优化的是指数损失,即\begin{align*} \mathbb{E}_{\boldsymbol{x} \sim \mathfrak{D}, y}[e^ ...
swap函数的四种写法
swap 函数的四种写法 (1)经典型 --- 嫁衣法 void swap(int *a, int *b) { int temp; temp = *a; *a = *b; *b = temp; } ( ...

CSS基础（六）：浮动深入

CSS基础（六）：浮动深入的更多相关文章

随机推荐

热门专题