float/文档流
- float : left | right | none | inherit;
- 文档流是文档中可显示对象在排列时所占用的位置。
- 浮动的定义: 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
- clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素。clear:both;在左右两侧均不允许浮动元素。
- 清除浮动方法
- 加高度 问题:扩展性不好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
height:200px;
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html> - 父级浮动 问题:页面中所有浮动元素都加浮动，margin左右自动失效(floats bad!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
float: left;
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html> - inline-block 问题:margin左右auto失效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
display: inline-block;
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html> - 空标签 问题:ie6最小高度19px;(解决后ie6下还有2px偏差)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="clearfix"></div>
</div>
</body>
</html> - br清浮动 问题:不符合工作中:结构、样式、行为，三者分离的要求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<br clear="all"/>
</div>
</body>
</html> - after伪类清浮动方法(现在主流方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border:1px solid red;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content:" ";
display: block;
clear:both;
}
/*
* after伪类：元素内部末尾添加内容；
* :after{ //IE6,IE7下不兼容
* content:"添加的内容";
* }
* zoom:缩放
* 触发IE下haslayout，使元素根据自身neir计算宽高
* FF不支持
*/
</style>
</head>
<body>
<div class="box clearfix">
<div class="item"></div>
</div>
</body>
</html> - overflow:hidden;清浮动方法 问题:需要配合宽度或者zoom兼容IE6，IE7
- overflow:scroll | auto | hidden; overflow:hidden;溢出隐藏(裁刀！)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*清除浮动：清除浮动元素的父级*/
.box{
border:1px solid red;
overflow: hidden;
}
.item{
width:200px;
height:200px;
background-color: black;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
- overflow:scroll | auto | hidden; overflow:hidden;溢出隐藏(裁刀！)
- 加高度 问题:扩展性不好
- BFC、haslayout
- BFC(block formatting context)标准浏览器
- float的值不为none
- overflow的值不为visible
- display的值为table-cell,table-caption,inline-block中的任何一个
- position的值不为relative和static
- width | height | min-width | min-height:(!auto)
- haslayout IE浏览器
- writing-model:tb-rl
- -ms-writing-model:tb-rl
- zoom:{!normal}
- BFC(block formatting context)标准浏览器
- 浮动的特征
- 块在一排显示
- 内联支持宽高
- 默认内容撑开宽度
- 脱离文档流
- 提升层级半层
float/文档流的更多相关文章
- Css问题 margin float 文档流 背景图底部充满
今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; backgrou ...
- float的元素脱离文档流，但不完全脱离，只是提升了半层；
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- 文档流 css中间float clear和布局
文档流 先说说什么是公文流转 什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...
- 一天搞定CSS： 浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- 脱离文档流两操作，float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- 文档流 css中的float clear与布局
文档流 先说说什么是文档流 流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;" ...
- 页面标准文档流、浮动层、float属性（转）
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
- float之脱离文档流
所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...
- css布局与文档流的关系之float（浮动）
所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...
随机推荐
- 「日常训练」 Soldier and Traveling (CFR304D2E)
题意 (CodeForces 546E) 对一个无向图,给出图的情况与各个节点的人数/目标人数.每个节点的人只可以待在自己的城市或走到与他相邻的节点. 问最后是否有解,输出一可行解(我以为是必须和答案 ...
- Linux-Shell脚本编程-学习-1-Linux基本命令
在学习Linux-Shell脚本编程之前,我们需要学习一定的Linux基本命令,不然在后面学习Shell脚本编程的的时候,我们就呵呵了. 我学习所用的系统是Ubuntu 16.04版本 也没有什么规则 ...
- SQLAlchemy 学习笔记（二）：ORM
照例先看层次图 一.声明映射关系 使用 ORM 时,我们首先需要定义要操作的表(通过 Table),然后再定义该表对应的 Python class,并声明两者之间的映射关系(通过 Mapper). 方 ...
- C++内置类型如何存放于计算机内存中
摘要:内置类型的机器实现.字/字节/比特.内存 一.概念 计算机以比特序列存储数据,每个比特非0即1,如:00011011011100010110010000111011... 二.计算机以块来处理内 ...
- Vue2.0 新手完全填坑攻略——从环境搭建到发布（转载）
强力推荐,详情请点击此链接http://www.jianshu.com/p/5ba253651c3b
- PE文件格式介绍
Useful Tools: 1. WDK安装目录下搜下depends.exe,这个工具可以查看.exe文件依赖的.dll,以及用到的dll中的api. 2.PE文件格式分析器: 有很多的PE格式分析器 ...
- Hibernate映射关系之_多对多
多对多关系由于效率的原因,实际中会拆成相互的一对多的关系,不再累述
- 【bzoj3997】[TJOI2015]组合数学 Dilworth定理结论题+dp
题目描述 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...
- [洛谷P4940]Portal2
题目大意:维护两个栈,几个操作: $PUSH\;x\;num:$把$num$压入栈$x$ $POP\;x:$弹出栈$x$栈顶元素 $ADD\;x:$取出两个栈栈顶,把相加值压入栈$x$ $SUB\;x ...
- BZOJ 2005 2005: [Noi2010]能量采集 | 容斥原理
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2005 题解: http://blog.csdn.net/popoqqq/article/de ...