一、浮动基础知识

假如一个页面上有3个div块，如下排列：

图1：不使用浮动

图2：向右浮动

图2说明了框1脱离了文档流向右移动，直到它的右边缘碰到包含框的右边缘为止。

图3：向左浮动

图3说明了框1向左浮动，脱离文档流向左移动，直到它的左边缘碰到框2的左边缘为止，由于框1脱离了文档流，不占据空间，框2处于文本流中，所以框1覆盖了框2。

      上面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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>体验CSS</title>

<style type="text/css">

<!--

/*上一行避免老式浏览器不支持CSS*/

body{

	padding:0px;

	margin:0px;

	background-color:#FFFF99;}

#title{

	font-size:19px;

	font-weight:bold;

	text-align:center;

	padding:15px;

	background-color:#FFFFCC;

	border:1px solid #FFFF00;}

#content{

	padding:6px;

	font-size:13px;

	line-height:130%;/*行间距*/}

img{

	float:left;/*图文混排*/

	filter:alpha(opacity=100,finishopacity=0,style=2);/*渐变效果*/}

</style>

</head>

<body>

<div id="title">CSS简介</div>

<div id="content">

<img src="file:///F|/02 B—S阶段/9.1精通CSS.DIV网页样式与布局/书中实例/第1章/bike.jpg" border="0" />

CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。

</div>

</body>

</html>

效果如下：

这个例子是图文混排，把图片设置为左浮动。

二、那么如何清除浮动呢？

清除浮动（clear）是float的一个属性。

语法：
 
       clear : none | left | right | both
 
       取值：
 
       none  :  默认值。允许两边都可以有浮动对象
 
       left   :  不允许左边有浮动对象
 
       right  :  不允许右边有浮动对象
 
       both  :  不允许有浮动对象

    

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

例子：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css清除浮动</title>

<style>

.float

{

  float:left;

  width:200px;

  height:100px;

  background:#6E6E6E;

}

.clear

{

  clear:left;

  float:left;

  width:200px;

  height:100px;

  background:#999999;

}

</style>

</head>

<body>

  <div class="float">这是一个浮动元素</div>

  <div class="clear">这是一个清除浮动属性的元素</div>

</body>

</html>

效果：

三、CSS浮动总结

浮动能使得块级标签排在同一行，但由于浮动脱离了文档位置，因为假如浮动层有一个不浮动的父亲层，父亲层是包不住浮动层的，就得清除浮动。关于CSS浮动本篇文章只是简单介绍了一下，还有更多的内容等待着去挖掘。

精简高效CSS系列之二——浮动float的更多相关文章

  1. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  2. 基于OceanStor Dorado V3存储之精简高效 Smart 系列特性

    基于OceanStor Dorado V3存储之精简高效 Smart 系列特性 1.1  在线重删 1.2  在线压缩 1.3  智能精简配置 1.4  智能服务质量控制 1.5  异构虚拟化 1.6 ...

  3. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  4. CSS定位机制：浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  5. 【CSS】 布局之浮动float和绝对定位absolute的选择

    浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位 ...

  6. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  7. 深入理解css系列：清除浮动

    如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...

  8. CSS盒子模型(boeder)+浮动(float)+定位(position)

    盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(wid ...

  9. CSS系列，清除浮动方法总结

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

随机推荐

  1. redis入门——redis常用命令

    http://blog.csdn.net/wclxyn/article/details/8449082 https://jingyan.baidu.com/article/90bc8fc87ce8e2 ...

  2. java基础35 双例集合Map及其常用方法

    单例集合体系: ---------| collection  单例集合的根接口--------------| List  如果实现了list接口的集合类,具备的特点:有序,可重复       注:集合 ...

  3. java基础23 Math类和Random类

    一.Math数学类 主要是提供很多数学的公式 1.1.Math类的常用方法 abs(int a):绝对值   ceil(double a):向上取整   floor(double a):向下取整   ...

  4. HDU 1669 Jamie's Contact Groups（多重匹配+二分枚举）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1669 题目大意: 给你各个人可以属于的组,把这些人分组,使这些组中人数最多的组人数最少,并输出这个人数 ...

  5. SQlserver创建函数实现只取某个字段的数字部分

    create FUNCTION [dbo].[GET_NUMBER](@S VARCHAR(100)) RETURNS VARCHAR(100) AS BEGIN WHILE PATINDEX('%[ ...

  6. 题解-python-CodeForces 1A

    A. Theatre Square time limit per test 2 seconds memory limit per test 64 megabytes input standard in ...

  7. 什么是 CLR（转）

    CLR(公用语言运行时)和Java虚拟机一样也是一个运行时环境,它负责资源管理(内存分配和垃圾收集),并保证应用和底层操作系统之间必要的分离..NET提供了一个运行时环境,叫做公用语言运行时(Comm ...

  8. hdu 5137 去掉一个点 使得最短路最大（2014广州现场赛 K题）

    题意:从2~n-1这几个点中任意去掉一个点,使得从1到n的最短路径最大,如果任意去掉一个点1~n无通路输出Inf. Sample Input4 51 2 31 3 71 4 502 3 43 4 23 ...

  9. day6 xml文件格式的处理

        XML处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公 ...

  10. 虚拟机之openVZ简单基础

    OpenVZ的是免费的开源软件,基于GNU GPL协议. OpenVZ的是基于Linux的容器虚拟化. OpenVZ在一台服务器上能够创建创建多个安全隔离的Linux容器(也称为虚拟环境或的VPS), ...