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 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
随机推荐
- SICAU教务系统登录密码加密算法的VB方式实现
关于一个算法.这个算法是SICAU教务系统在账号登录时采取的一个加密算法.算法的实现并不复杂. 具体如下: Function Form1pwdvalue(ByVal pwdvalue As Strin ...
- 转载：iOS开发之让你的应用“动”起来
在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画 ...
- Daily Scrum02 12.16
鉴于近期数据库大作业提交到了关键时期,大家的时间都十分的紧张,因而,我们决定全团队成员交替作业,不在每日每个成员都分配任务,而只需要每个成员保证每两天一次的工作量,以此方式给大家腾出去完成自己的事情. ...
- mui框架中底部导航的跳转2
接上一篇 还有一种方法就是在一心得页面中打开我们所需要的网页 代码如下: 向新的的页面穿值: 获取到新页面上的值:
- Java_正则表达式
1.简介 正则表达式是一串特定字符串,组成一个“规则字符串”,这个“规则字符串”是描述文本规则的工具.正则表达式就是记录文本规则的代码. 2.字符集合 [abc] a,b,c中任意一个字符 [^abc ...
- 学习笔记——SQLite介绍
简介:Google为android的较大数据的处理提供了SQLlite, 他在数据存储.管理.维护.等各方面都相当出色功能也非常强大. 1.创建数据库 Android 为了让我们能够更加方便地管理数据 ...
- $Host.Runspace.ThreadOptions = “ReuseThread”有神马用？
$Host.Runspace.ThreadOptions = “ReuseThread” 在很多PowerShell的脚本中你都会看到这个语句被用来开头,那它的作用是什么呢? 答:这个设置可以提高对内 ...
- Haskell 函数式编程快速入门【草】
什么是函数式编程 用常规编程语言中的函数指针.委托和Lambda表达式等概念来帮助理解(其实函数式编程就是Lambda演算延伸而来的编程范式). 函数式编程中函数可以被非常容易的定义和传递. Hask ...
- 网站压力负载测试工具：Web版已逝，只好送大伙单机版
前言: 最近老板资金周转出了点问题,工资好久没发了,于是暂闲置在家,静待老板弄到钱东山再起的消息: QQ群里,偶尔不时的会有人问,原来的分布式网站负载工具怎么下载不了啦?或者不能用啦?之类的问题. 我 ...
- Android安全开发之安全使用HTTPS
Android安全开发之安全使用HTTPS 1.HTTPS简介 阿里聚安全的应用漏洞扫描器中有证书弱校验.主机名弱校验.webview未校验证书的检测项,这些检测项是针对APP采用HTTPS通信时容易 ...