精简高效CSS系列之二——浮动float
一、浮动基础知识
假如一个页面上有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的更多相关文章
- CSS(6)---通俗讲解浮动(float)
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...
- 基于OceanStor Dorado V3存储之精简高效 Smart 系列特性
基于OceanStor Dorado V3存储之精简高效 Smart 系列特性 1.1 在线重删 1.2 在线压缩 1.3 智能精简配置 1.4 智能服务质量控制 1.5 异构虚拟化 1.6 ...
- CSS系列 (05)：浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- CSS定位机制：浮动 float及清除浮动的常用方法
CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...
- 【CSS】 布局之浮动float和绝对定位absolute的选择
浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- 深入理解css系列：清除浮动
如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...
- CSS盒子模型(boeder)+浮动(float)+定位(position)
盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 = 内容的宽(wid ...
- CSS系列，清除浮动方法总结
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
随机推荐
- mac 升级10.12 php debug 环境 跑不起的解决 解决方案
1: mac 升级后发现 php从原来的5.5 升级为 5.6 了... 所以以前 php.ini 里面的配置全部都没有了. mac 给我们做了备份2: 没办法只能升级php对应的插件到5. ...
- angular可自定义的对话框,弹窗指令
指令不明的,推荐 AngularJS指令参数详解 github地址 以下为示例代码 <!DOCTYPE html> <html lang="en" ng-app= ...
- sql newid()随机函数
从A表随机取2条记录,用SELECT TOP 10 * FROM ywle order by newid()order by 一般是根据某一字段排序,newid()的返回值 是uniqueidenti ...
- 20165203迭代和JDB测试
1.使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 public class C { public static void main(Strin ...
- Writing a Kernel in C++
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
- SSIS 学习之旅 FTP文件传输-脚本任务
这一章主要讲解一下用脚本怎么把CSV文件抛送到FTP服务器上 设计: 通过Demon库的Users表数据生成CSV文件. 生成后的CSV文件抛送到FTP指定目录下. 控件的使用这里就不做详细讲 ...
- 流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)
去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程 ...
- Rookey.Frame企业级快速开发框架开源了
Rookey.Frame是一套基于.NET MVC + easyui的企业级极速开发框架,支持简单逻辑模块零代码编程.支持工作流(BPM).支持二次开发,具有高扩展性.高复用性.高伸缩性:应广大网友要 ...
- 【LOJ】#2059. 「TJOI / HEOI2016」字符串
题解 我们冷静一下,先画一棵后缀树 然后发现我们要给c和d这一段区间在[a,b]这一段开头的串里找lcp 而lcp呢,就是c点的祖先的到根的一段,假如这个祖先的子树里有[a,b - dis[u] + ...
- bzoj 1925 dp
思路:dp[ i ][ 0 ]表示第一个是山谷的方案,dp[ i ][ 1 ]表示第一个是山峰的方案, 我们算dp[ x ][ state ]的时候枚举 x 的位置 x 肯定是山峰, 然后就用组合数算 ...