BFC之清除浮动篇&clear
我们在日常代码生活中，或多或少会利用浮动来布局，例如导航布局，如下图所示：
但是，我们在实现的时候，经常会遇到父元素“塌陷”以及清除浮动问题。例如
<!DOCTYPE html>
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
.div1 {
width:100px;
height:100px;
background:black;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
<div class="div1"></div>
</body>
</html>
上图中的子元素（绿色），就没有被父元素（粉红色的线条）包裹住，这就是塌陷问题。上图中的黑色div本该在两个绿色下方，但现在却是这样，这就是没有清除浮动带来的问题。
咦，那浮动这个东东，怎么会如此坏的呢？！！
其实，也不怪人家，本来float的设计初衷就不是用在布局，而是文字环绕，无奈，被用在了布局上。
强扭的瓜不甜嘛，不过也解渴。
针对它的特性对症下药就好了，哈哈哈。
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。
好了，了解了它的要点，就开始对症下药了哦，哈哈哈。
常规的解决方法就是利用clear来清除浮动，以及浮动带来的塌陷问题。
<!DOCTYPE html>
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
.div1 {
width:100px;
height:100px;
background:black;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<!--在尾部加入一个带有clear的块级元素-->
<div style="clear:both;"></div>
</ul>
<div class="div1"></div>
</body>
</html>
运行代码，效果图见下：
这样做目的是达到了，但是它是向页面中添加内容来达到效果的，破坏了结构以及毫无语义。
由此，我们引入伪元素来解决这样的问题。PS:修改的代码中，引入了Nicolas Gallagher大师的代码。
<!DOCTYPE html>
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
}
/*用after伪元素，向ul追加一个清除浮动元素*/
ul:after {
content:'';
display:table;
clear:both;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
.div1 {
width:100px;
height:100px;
background:black;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
<div class="div1"></div>
</body>
</html>
啊哈，真是这样的。
But，:after?!!IE6、7尼玛又不支持它。
是哈，我们再来想办法看看怎么优化优化。
由于IE6、7有个hasLayout，这个hasLayout是么子东西呢，当hasLayout属性值为false的时候，元素的尺寸和位置就由最近拥有布局的祖先控制；当为true时，会达到与BFC类似的效果。所以我们可以利用这一点解决IE6、7对:after的藐视。。
利用zoom来触发IE6、7是一个比较通用的做法，所以我们结合zoom和after，就得到了一个相对靠谱的解决方案了。
代码如下：
/*hack手段针对IE6、7*/
.fix {
*zoom:;
}
/*大众浏览器*/
.fix:after {
content:"";
display:table;
clear:both;
}
修改上面的demo代码如下：
<!DOCTYPE html>
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
ul {
border:1px solid pink;
/*hack手段触发IE6、7的haslayout*/
*zoom:1;
}
/*用after伪元素，向ul追加一个清除浮动元素*/
ul:after {
content:'';
display:table;
clear:both;
}
li {
width:100px;
height:100px;
margin-left:10px;
background:green;
float:left;
list-style-type:none;
}
.div1 {
width:100px;
height:100px;
background:black;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
<div class="div1"></div>
</body>
</html>
BFC之清除浮动篇&clear的更多相关文章
- 浮动（float）与清除浮动（clear）
上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...
- css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- BFC和清除浮动
1.清浮动(不考虑兼容的话这一项够用了): .clear:after{ content:''; display:block; clear:both; } 兼容ie6或7 加一个 .clear{ *zo ...
- BFC清除浮动
BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...
- [转]CSS clear both清除浮动
DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- css(float浮动和clear清除)
教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1 ...
- day68-CSS-float浮动，clear清除浮动，overflow溢出
1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...
- 详说 CSS 清除浮动
转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
随机推荐
- Android应用-听听
听听是一款记歌词音乐播放器android应用. 功能特点:1.搜索网络歌词.2.本地音乐分类播放.3.离线保存网络歌词.4.页面整洁干净,风格清新. 下载APP 屏幕截图:
- Yii框架CURD方法
在YII框架中,CURD有2种方式: 1.AR模式:2. DAO模式 AR模式下 查全部 MODEL $model->find()->asArray()->all()查单 个 ...
- 正则表达式在python中的应用
一.常用符号 . :匹配任意字符,换行符\n除外 * :匹配前一个字符0次或无限次 ? :匹配前一个字符0次货1次 .* :贪心算法 .*? :非贪心算法 () :括号内的数据作为结果返回 ...
- （转）名称和本质 by王珢
名称和本质 by 王垠 我很喜欢 Richard Feynman 写的 <What Do You Care What Other People Think>.在最开头 Feynman 讲到 ...
- 优化curl并发使用
经典curl并发的处理流程:首先将所有的URL压入并发队列, 然后执行并发过程, 等待所有请求接收完之后进行数据的解析等后续处理. 在实际的处理过程中, 受网络传输的影响, 部分URL的内容会优先于其 ...
- 【转】stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagat ...
- Flask 重新认识
总是觉的学习东西有点猴子掰玉米的感觉.今天就重新再掰一次吧. Installation: 安装之前建议先安装virtualenv,这个东东是帮助你在多个python版本之间保持同步,不至于python ...
- javascript 执行上下文的理解
首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...
- GiuHub 使用
一 Mac 能不能连接安卓手机 1 USB数据线 设置 > 通用 > 开发人员选项 > USB调试 > 选择"相机PTP模式" 连接后,手机中的照片和视 ...
- Git分布式版本控制系统学习笔记
Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[4] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...