浮动

float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定。浮动可以让一个元素移到它所在行的某一边,使得其他内容沿着该元素的边缘向下流。

浮动的盒子会脱离文档流,形成环绕的效果。

脱离文档流

当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果把所有三个框都向左移动,那么框 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{
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-2的文字在围绕着Box-1排列,此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢?用Firebug可以发现,是与Box-1的左边框重合,因为此时Box-1已经脱离标准流,标准流中的Box-2会顶到原来Box-1的位置,而文字会围绕着Box-1排列。

环绕效果

<style type="text/css">
img {
float: left;
}
</style>
<img src="http://XXX" />
<p>Some words...</p>

清除浮动

因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

.news {
background-color: gray;
border: solid 1px black;
} .news img {
float: left;
} .news p {
float: right;
} .clear {
clear: both;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

有时,并不愿意因为要清除浮动而添加额外的div,可以采用如下方法:

1.新的解决方法是在浮动元素的容器上使用 overflow 属性,如果你设值为hidden 或 auto,也可以解决高度重叠的问题。


.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
} .news img {
float: left;
} .news p {
float: right;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

2.上面这种方法更简单也更优雅,但是问题是,如果容器元素必须设置为overflow: visible,又该怎么办呢?方法是首先使用 :before 和 :after 在元素内创建一些不浮动的东西,但实际上我们并不希望出现任何多余的东西,所以一般设置一个空字符串,但是要设置display:block,最后使用老办法,清除浮动。

使用为元素处理:

.news {
background-color: gray;
border: solid 1px black;
} .news img {
float: left;
} .news p {
float: right;
} .clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} <div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

如果需要兼容IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

浮动使用tips:

1. 浮动元素的活动区域

  仅限于它的父容器元素,不会超出父容器

2. 浮动元素的位置

  水平方向:尽可能居左或居右,如果它前面还有浮动元素,会跟在它后面,如果超出该行就会换行

  垂直方向:尽可能的居顶

关于水平方向的位置,需要注意以下几点:

1) 向左浮动的元素不会出现在向右浮动的元素的右侧

关于垂直方向的位置,需要注意以下几点:

1) 浮动元素不会比容器的顶部还高

2) 浮动元素不会比前一个块级元素或浮动元素更高

3) 浮动元素不会比前一个行内元素更高

绝对定位

设置为绝对定位的元素框会脱离文档流,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。所谓的包含块就是离其最近的position不为static值的父元素。注意:应用了position: absolute的元素会脱离页面中的普通流并改变display属性.

#box2{
position: absolute;
left: 30px;
top: 20px;
}

绝对定位要点:

1.使用绝对定位的盒子以它的“最近”的一个“已定位”(position属性被设置,并且被设置为不是static的任意一种)的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。

2.绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。

css浮动与绝对定位小记的更多相关文章

  1. css 浮动 相对定位 绝对定位区别

    今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...

  2. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  3. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  4. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  5. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  6. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  7. css中的绝对定位和相对定位(详解,总结)

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

  8. css 浮动问题详解

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  9. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

随机推荐

  1. C fwrite

    功能:向文件读入写入一个数据块. 用法:fwrite(const void *buffer,size_t size,size_t count,FILE *stream); (1)buffer:是一个指 ...

  2. PyCharm2016.2专业版注册码

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  3. swfit-扩展语法

    import UIKit extension Double { var km: Double { } var m : Double { return self} var cm: Double { re ...

  4. [转]推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler

    在C#WINFORM或者是ASP.NET的WEB应用程序中,根据各种定时任务的需求,比如:每天的数据统计,每小时刷新系统缓存等等,这个时候我们得应用到定时器这个东东. .NET Framework有自 ...

  5. js数组去重的hash方法

    对于 JavaScript 数组去除重复项,现在有多种方法,其中一种是hash,如下: if (!Array.prototype.unique) { Array.prototype.unique = ...

  6. linux下常见的字符串处理

    linux下有许多对字符串文本的处理工具,diff,grep,awk,sed等等.. diff 比较两个文件的不同 [root@bogon diff]# diff file1 file2 以高亮的形式 ...

  7. 使用crypto模块实现md5加密功能(解决中文加密前后端不一致的问题)

    正常情况下使用md5加密 var crypto = require('crypto'); var md5Sign = function (data) { var md5 = crypto.create ...

  8. RelativeLayout中实现控件平分屏幕

    <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_con ...

  9. cloudera learning8:MapReduce and Spark

    YARN:Yet Another Resource Negotiator, Hadoop集群的资源管理器,可以对运行在Hadoop上的MapReduce V2,Spark,Impala等进行内存和CP ...

  10. 自定义NSLog

    我们在调试程序的时候,往往需要输出一些日志信息,用到NSLog函数,当我们准备发布程序,需要注释掉NSLog代码,这个时候往往会定义一个宏,在调试的时候,会输出日志,在Release正式版本的时候,会 ...