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 ...
随机推荐
- 如何删除TFS项目
TFS是先建集合,再在集合下面建项目.删除的时候,需要先删除项目,再删除集合,然后重新建.具体步骤如下: 1.删除项目 删除项目必须通过命令来进行删除,调用TFSDeleteProjec ...
- 云计算之路-阿里云上：Web服务器请求到达量突降
今天下午遇到了自使用阿里云以来首次遇到的新情况——http.sys的ArrivalRate突降(说明请求到达IIS的请求数量少了),而且SLB中的3台ECS都出现了这个问题. 1. 10.161.24 ...
- jquery框架一点小心得
下面的小事例 主要实现了 一和按ID查找,并获取元素的 value 或 标签内容和一个去字符串空格的小功能能 假设元素id=“myid”: 获取标签内容$("myid").html ...
- Python-学习-小例子练习
网上了点小例子,练习一下下,都是特别简单的.而且这些代码也都是找的网上的代码,目的是在于练习一下Python和熟悉下Python的编码风格等等 学习一门语言,最快的方法就是把它用在世界的开发中,这样才 ...
- Spring实战第六章学习笔记————渲染Web视图
Spring实战第六章学习笔记----渲染Web视图 理解视图解析 在之前所编写的控制器方法都没有直接产生浏览器所需的HTML.这些方法只是将一些数据传入到模型中然后再将模型传递给一个用来渲染的视图. ...
- Spring实战第一章学习笔记
Spring实战第一章学习笔记 Java开发的简化 为了降低Java开发的复杂性,Spring采取了以下四种策略: 基于POJO的轻量级和最小侵入性编程: 通过依赖注入和面向接口实现松耦合: 基于切面 ...
- LAMP架构应用实战—Apache服务介绍与安装01
LAMP架构应用实战—Apache服务介绍与安装01 一:Apache是什么 Apache是Apache基金会开发的一个高性能.功能强大.安全可靠.灵活的开放源码的WEB服务软件 二:Apache ...
- 问题 E: 完数与盈数
问题 E: 完数与盈数 时间限制: 1 Sec 内存限制: 32 MB提交: 73 解决: 69[提交][状态][讨论版][命题人:外部导入] 题目描述 一个数如果恰好等于它的各因子(该数本身除外 ...
- PAT——甲级1012：The Best Rank（有坑）
1012 The Best Rank (25 point(s)) To evaluate the performance of our first year CS majored students, ...
- Codeforces Round #345 Div.1 D.Zip-line 动态最长上升子序列
题意概述: 给出一个长度为N的序列和M组询问,问假设把某个位置的值改成另一个给出的值之后,序列的最长上升子序列的长度. N,M<=400000. 分析: 考虑某个位置的值改动后这个位置和最长上升 ...