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 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
随机推荐
- PHP去重算法的优化过程
最近公司在做一个项目,需要对爬取到的数据进行去重,方法就是根据数据的id,去除掉id重复的数据. 下面是这个方法的演化过程. // 去重 $arr_id = array(); $LeTVFeedLis ...
- 通过修改i8042prt端口驱动中类驱动Kbdclass的回调函数地址，达到过滤键盘操作的例子
同样也是寒江独钓的例子,但只给了思路,现贴出实现代码 原理是通过改变端口驱动中本该调用类驱动回调函数的地方下手 //替换分发函数 来实现过滤 #include <wdm.h> #inclu ...
- JS请求服务器并使页面跳转(转)
前段时间在项目中用到了前台框架EasyUI,各种组件都是差不多都是用js来渲染的,这样一些页面请求就必须用js代码来写. 但是js请求就不和html请求的玩法不怎么相同,比如我要向服务器发送一个请求然 ...
- Node.js开发者最常范的10个错误
目录 前言 1 不使用开发工具 1.1 自动重启工具 1.2 浏览器自动刷新工具 2 阻塞event loop 3 频繁调用回调函数 4 圣诞树结构的回调(回调的地狱) 5 创建一个大而完整的应用程序 ...
- Swift 和 C# 的语法比较
昨天看到Jacob Leverich 写了一篇文章 Swift is a lot like Scala 介绍Swift 和 Scala 的语法对比,从这篇文章的确可以看到Swift 的语法和 Scal ...
- C语言 · 出现次数最多的数
问题描述 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统计,把出现次数最多的那个数组元素值打印出来.如果有两 ...
- Java Collections.sort方法对list集合排序
1.排序测试类 package com.ljq.test; import java.util.ArrayList; import java.util.Collections; import java. ...
- spring快速入门（一）
对于为什么使用spring框架,这里不多做解释,详情请百度.本人推荐面向驱动程序学习,通过实战来瞧瞧spring技术的伟大.所以先来看看原始开发一个简单的例子,由例子引入spring相关的技术.如果错 ...
- 一个不错的vue表单验证插件
github文档 用着不错,官方的文档例子很简单 <body> <div id="app"> <validator name="valida ...
- xamarin 手机顶部状态栏
修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...