浮动float:

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。(W3C)

  绝对定位absolute:

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。(W3C)  


  以上是W3C里对浮动和绝对定位的解释。

  乍一看貌似两者没有什么关系,不过仔细想想,两者又有很多的相似之处。比如两者都从文档流中独立出来,并且元素在文档流中的原有空间都会被关闭。

  我们可以用两者达成同一个目的。

  首先写一个坯子: 

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline、block、inline-block的区别</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
margin: 100px auto 0 auto;
border: 1px solid red;
} #a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
}
#a {
background: #ccc;
}
#b {
background: #666;
}
#c {
background: blue;
}
#d {
background: green;
}
</style>
</head>
<body>
<div id="box" class="clearfix">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>

  效果:

 

  现在我们给a块做向左浮动:

 #a {
background: #ccc;
float: left;
}

  我们看到a块向左浮动,文档流中失去了空间,之后的b、c、d逐次补上。

  如果给a块设置绝对定位又是什么情况呢?

 #a {
background: #ccc;
position: absolute;
}

  我们发现效果是一样的。

  不过如果a块后面有一段文字呢?

 <body>
<div id="box" class="clearfix">
<div id="a"></div>
<span>SD卡收到货我ID号为活动文化低哦按活动ihawoidh</span>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>

  浮动float:

  绝对定位absolute:

  这么看差别就出来了,绝对定位独立于整个模型中,没有影响到文档流中的元素,而浮动则影响到了其之后的文档流。  


  接下来,我们给a、b、c、d全部都浮动或者绝对定位:

  浮动float:

  绝对定位absolute:

  这样也看出区别了,元素进行浮动后,会按照浮动流的先后顺序进行排列,而绝对定位则是每一个元素都独立存在于其他所以元素。 


  现在,我们想把a、b、c、d的父元素box框给撑起来,其实也就是其父元素自适应高度,则浮动可以用clear属性:

  我们可以在d块后面加一个

 <div style="clear: both"></div>

  或者有更好的方法:

 .clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

   这种方法是用":after"伪元素在元素的内容之后插入了一个块级元素(display: block)。将其属性设置"clear:both"从而达到与前者同样的效果。

  至于上面两种方法的取舍,建议使用下一种,因为下面一种不用在html代码里添加额外的div块代码,不会对html的结构造成影响。 

  如果我们要让进行绝对定位的父元素边框自适应该怎么办?clear只能应用在清除浮动的操作中,对进行绝对定位的元素块是不起作用的。所以我们只能通过计算给父元素框设置高度,这样才能达到这样的效果。


  如果我们需要达到这样的效果:

    页面四角固定有四个元素块,页面中央有一个固定长宽的元素块居中,并且当我们调整页面的大小时,这些元素块相对于页面的位置不发生改变。

  有2种方法可以达到这样的效果:

  第一种: 浮动+定位:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float和absolute</title>
<style>
* {
margin: 0;
padding: 0;
} #a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
background: #666;
}
#a {
float: left;
}
#b {
float: right;
}
#c {
float: left;
position: absolute;
left: 0;
bottom: 0;
}
#d {
float: right;
position: absolute;
right: 0;
bottom: 0;
}
#content {
width: 400px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="content"></div>
</body>
</html>

  第二种:绝对定位 :

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float和absolute</title>
<style>
* {
margin: 0;
padding: 0;
} #a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
background: #666;
}
#a {
position: absolute;
top: 0;
left: 0;
}
#b {
position: absolute;
top: 0;
right: 0;
}
#c {
position: absolute;
left: 0;
bottom: 0;
}
#d {
position: absolute;
right: 0;
bottom: 0;
}
#content {
width: 400px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="content"></div>
</body> </html>

  仔细观察发现其实第一种方法完全有点画蛇添足的意思,将四个元素浮动再定位还不如开始就定位来得直接。而且如果用了浮动实现,还会发生很多意外的情况。

  比如在box内容的最上端添加一个高度为100px宽度为400px并居中的长框。

  浮动float:

  绝对定位absolute:

  我们发现后期往html结构里添加内容时,只有绝对定位的布局没有受到影响,这恰恰是我们所需要达到的效果。


  所以在日常的选择中,固定分布的布局尽量使用定位(relative/absolute),而浮动则在导航条等横式布局中运用得多一些。

【CSS】 布局之浮动float和绝对定位absolute的选择的更多相关文章

  1. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  2. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  3. CSS快速入门-浮动(float)

    一.float概述 浮动(float)是CSS布局常用的一个属性.它可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边框. float被设计出来的初衷是用于文字环绕效果.如下代码: <! ...

  4. 【Web】CSS中的浮动float

    CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...

  5. CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

    display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...

  6. 学习完成CSS布局(左右浮动)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. CSS布局中浮动问题的四种解决方案

    一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...

  8. CSS 基础 例子 浮动float

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

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

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

随机推荐

  1. Sed的使用方法简介

    =============Sed================== Sed:是一款流编辑工具,用来对文本进行过滤与替换工作,特别是当你想对几十个配置文件进行统一修改时,你会体会到它的魅力:Sed通过 ...

  2. redis整理の主从复制

    redis 主从复制配置和使用都非常简单.通过主从复制可以允许多个 slave server 拥有和 master server 相同的数据库副本. 特点: (1).master 可以拥有多个 sla ...

  3. 基于ZKEACMS的.Net Core多租户CMS建站系统

    多租户架构 多租户技术或称多重租赁技术,简称SaaS,是一种软件架构技术,是实现如何在多用户环境下共用相同的系统或程序组件,并且可确保各用户间数据的隔离性.简单讲:在一台服务器上运行单个应用实例,它为 ...

  4. Sql2012 AlwaysOn

    准备: 两台宿主机,两台虚拟机,一根交叉线 系统都是windows server 2012 步骤 1.两台虚拟机均为双网卡 2.配置故障转移群集 3.执行AlwaysOn配置(增加Listen此步骤上 ...

  5. 使用原生javascript和jQuery解析json数据

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...

  6. 牛客网提高组模拟赛第五场 T1同余方程(异或)(位运算)

    区间不好做,但是我们可以转化成前缀来做.转化为前缀之后之后就是二维前缀和. 但是我还是不怎么会做.所以只能去看吉老师的题解 (确定写的那么简单真的是题解???). 我们要求模一个数余0,就等于找它的倍 ...

  7. leetcode 18 4Sum JAVA

    题目 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出 ...

  8. 526. Beautiful Arrangement

    Suppose you have N integers from 1 to N. We define a beautiful arrangement as an array that is const ...

  9. css3里面的-webkit-transition

    css3里面的-webkit-transition (1)-webkit-transition-timing-function 可以定义动画的变化时间曲线-webkit-transition-timi ...

  10. iOS开发之像素Compositing

    假如Layer S·在Layer D上面,则最终的屏幕的颜色值如下: \[R = S + D \cdot (1- S_\alpha)\] \(R\): 最终的RGB \(S\): source col ...