【CSS】 布局之浮动float和绝对定位absolute的选择
浮动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的选择的更多相关文章
- CSS布局模型学习(Float、Position、Flexbox)
一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...
- [浅谈CSS核心概念] CSS布局模型：float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- CSS快速入门-浮动(float)
一.float概述 浮动(float)是CSS布局常用的一个属性.它可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边框. float被设计出来的初衷是用于文字环绕效果.如下代码: <! ...
- 【Web】CSS中的浮动float
CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 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 ...
- 学习完成CSS布局(左右浮动)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS布局中浮动问题的四种解决方案
一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决 ...
- CSS 基础 例子 浮动float
一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
随机推荐
- 前端jq设置下拉框的，单选框，复选框的帖子
$(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...
- redis----内部数据结构学习
整数集合 1.应用 用于有序.无重复的保存多个整数值 自动选择该用什么长度的整数类型保存数据
- Partition--分区切换2
有分区表TB2和TB2_History CREATE TABLE TB2( ID BIGINT IDENTITY(1,1) PRIMARY KEY, C1 NVARCHAR(200))ON[ps_T ...
- Sql Server 2012 数据库同步方式 (发布、订阅)
上篇中说了通过SQL JOB的方式对数据库的同步,这一节作为上一节的延续介绍通过发布订阅的方式实现数据库之间的同步操作.发布订阅份为两个步骤:1.发布.2订阅.首先在数据源数据库服务器上对需要同步的数 ...
- Django 标签过滤器
django内置标签 autoescape 控制当前的自动转义行为.这个标记可以作为参数打开或关闭,它决定自动转义是否在块内有效.块使用endautoescape结束标记关闭. 当自动转义生效时,所有 ...
- 知物由学 | 如何利用人工智能来对抗DDoS攻击？
欢迎访问网易云社区,了解更多网易技术产品运营经验. "知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理 ...
- system idle process
偶然发现windows环境任务管理其中存在进程 system idle process,cpu占用极大但内存占用很小.google了一下,保存下结果 system idle process :系统空闲 ...
- HAOI2010 订货
题目链接:戳我 费用流. 将每天分成早上和晚上两个点.源点向早上连容量INF,费用为进货量的边.早上向汇点连容量供货量,费用0.早上向晚上连容量为S,费用为0的边.晚上向第二天早上连容量S,费用0.之 ...
- 【04】循序渐进学 docker：Dockerfile
写在前面的话 从前面我们简单的了解了镜像,也运行了容器,各种官方的镜像显然无法满足我们自己的需求,我们目的终究是运行自己的业务. 所以,本章节的 Dockerfile 就主要讲怎么在官方镜像的基础上制 ...
- 原生态js展开高度自适应100%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...