我们在日常代码生活中，或多或少会利用浮动来布局，例如导航布局，如下图所示：

但是，我们在实现的时候，经常会遇到父元素“塌陷”以及清除浮动问题。例如

  1. <!DOCTYPE html>
  2.     <head>
  3.         <title>Float</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.         <style>
  6.             *{
  7.                 margin:0;
  8.                 padding:0;
  9.             }
  10.             ul {
  11.                 border:1px solid pink;
  12.             }
  13.             li {
  14.                 width:100px;
  15.                 height:100px;
  16.                 margin-left:10px;
  17.                 background:green;
  18.                 float:left;
  19.                 list-style-type:none;
  20.             }
  21.             .div1 {
  22.                 width:100px;
  23.                 height:100px;
  24.                 background:black;
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <ul>
  30.             <li></li>
  31.             <li></li>
  32.         </ul>
  33.         <div class="div1"></div>
  34.     </body>
  35. </html>

上图中的子元素（绿色），就没有被父元素（粉红色的线条）包裹住，这就是塌陷问题。上图中的黑色div本该在两个绿色下方，但现在却是这样，这就是没有清除浮动带来的问题。

咦，那浮动这个东东，怎么会如此坏的呢？！！

其实，也不怪人家，本来float的设计初衷就不是用在布局，而是文字环绕，无奈，被用在了布局上。

强扭的瓜不甜嘛，不过也解渴。

针对它的特性对症下药就好了，哈哈哈。

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。

好了，了解了它的要点，就开始对症下药了哦，哈哈哈。

常规的解决方法就是利用clear来清除浮动，以及浮动带来的塌陷问题。

  1. <!DOCTYPE html>
  2.     <head>
  3.         <title>Float</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.         <style>
  6.             *{
  7.                 margin:0;
  8.                 padding:0;
  9.             }
  10.             ul {
  11.                 border:1px solid pink;
  12.             }
  13.             li {
  14.                 width:100px;
  15.                 height:100px;
  16.                 margin-left:10px;
  17.                 background:green;
  18.                 float:left;
  19.                 list-style-type:none;
  20.             }
  21.             .div1 {
  22.                 width:100px;
  23.                 height:100px;
  24.                 background:black;
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <ul>
  30.             <li></li>
  31.             <li></li>
  32.             <!--在尾部加入一个带有clear的块级元素-->
  33.             <div style="clear:both;"></div>
  34.         </ul>
  35.         <div class="div1"></div>
  36.     </body>
  37. </html>

运行代码，效果图见下：

这样做目的是达到了，但是它是向页面中添加内容来达到效果的，破坏了结构以及毫无语义。

由此，我们引入伪元素来解决这样的问题。PS:修改的代码中，引入了Nicolas Gallagher大师的代码。

  1. <!DOCTYPE html>
  2.     <head>
  3.         <title>Float</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.         <style>
  6.             *{
  7.                 margin:0;
  8.                 padding:0;
  9.             }
  10.             ul {
  11.                 border:1px solid pink;
  12.             }
  13.             /*用after伪元素，向ul追加一个清除浮动元素*/
  14.             ul:after {
  15.                 content:'';
  16.                 display:table;
  17.                 clear:both;
  18.             }
  19.             li {
  20.                 width:100px;
  21.                 height:100px;
  22.                 margin-left:10px;
  23.                 background:green;
  24.                 float:left;
  25.                 list-style-type:none;
  26.             }
  27.             .div1 {
  28.                 width:100px;
  29.                 height:100px;
  30.                 background:black;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <ul>
  36.             <li></li>
  37.             <li></li>
  38.         </ul>
  39.         <div class="div1"></div>
  40.     </body>
  41. </html>

啊哈，真是这样的。

But，:after?!!IE6、7尼玛又不支持它。

是哈，我们再来想办法看看怎么优化优化。

由于IE6、7有个hasLayout，这个hasLayout是么子东西呢，当hasLayout属性值为false的时候，元素的尺寸和位置就由最近拥有布局的祖先控制；当为true时，会达到与BFC类似的效果。所以我们可以利用这一点解决IE6、7对:after的藐视。。

利用zoom来触发IE6、7是一个比较通用的做法，所以我们结合zoom和after，就得到了一个相对靠谱的解决方案了。

代码如下：

  1. /*hack手段针对IE6、7*/
  2. .fix {
  3.     *zoom:;
  4. }
  5. /*大众浏览器*/
  6. .fix:after {
  7.     content:"";
  8.     display:table;
  9.     clear:both;
  10. }

修改上面的demo代码如下：

  1. <!DOCTYPE html>
  2.     <head>
  3.         <title>Float</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.         <style>
  6.             *{
  7.                 margin:0;
  8.                 padding:0;
  9.             }
  10.             ul {
  11.                 border:1px solid pink;
  12.                 /*hack手段触发IE6、7的haslayout*/
  13.                 *zoom:1;
  14.             }
  15.             /*用after伪元素，向ul追加一个清除浮动元素*/
  16.             ul:after {
  17.                 content:'';
  18.                 display:table;
  19.                 clear:both;
  20.             }
  21.             li {
  22.                 width:100px;
  23.                 height:100px;
  24.                 margin-left:10px;
  25.                 background:green;
  26.                 float:left;
  27.                 list-style-type:none;
  28.             }
  29.             .div1 {
  30.                 width:100px;
  31.                 height:100px;
  32.                 background:black;
  33.             }
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <ul>
  38.             <li></li>
  39.             <li></li>
  40.         </ul>
  41.         <div class="div1"></div>
  42.     </body>
  43. </html>

BFC之清除浮动篇&clear的更多相关文章

  1. 浮动（float）与清除浮动（clear）

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  2. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  3. BFC和清除浮动

    1.清浮动(不考虑兼容的话这一项够用了): .clear:after{ content:''; display:block; clear:both; } 兼容ie6或7 加一个 .clear{ *zo ...

  4. BFC清除浮动

    BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...

  5. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  6. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  7. css(float浮动和clear清除)

    教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1 ...

  8. day68-CSS-float浮动，clear清除浮动，overflow溢出

    1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...

  9. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

随机推荐

  1. 【转载】64 位 Windows 内核虚拟地址空间布局（基于 X64 CPU）

    原文链接:http://shayi1983.blog.51cto.com/4681835/1734822 本文为原创翻译,原文出处为 http://www.codemachine.com/articl ...

  2. Mac下搭建hexo

    Mac下搭建hexo 并部署到gitcafe 1.安装brewhome ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homeb ...

  3. AJax登录。。转

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.        AJAX 是一种用于创建快速 ...

  4. 【转】最大流EK算法

    转自:http://www.cnblogs.com/kuangbin/archive/2011/07/26/2117636.html 图-1 如图-1所示,在这个运输网络中,源点S和汇点T分别是1,7 ...

  5. C#：获取设备电量相关信息

    更多资源:http://denghejun.github.io [DllImport("kernel32.dll",EntryPoint="GetSystemPowerS ...

  6. Android再学习

    1.点击事件的几种实现方式 Button Btn1 = (Button)findViewById(R.id.button1);//获取按钮资源 Btn1.setOnClickListener(new ...

  7. Android课程---关于Service的学习(后台运行)

    MainActivity.java package com.hanqi.test2; import android.content.ComponentName; import android.cont ...

  8. c = (a / b, a%b) 运算输出顺序

    #include<iostream> int main() { using namespace std; int a, b, c; a = ; b = ; c = ; printf(&qu ...

  9. 在iOS中使用ZXing库[转]

    前言 ZXing(Github镜像地址)是一个开源的条码生成和扫描库(开源协议为Apache2.0).它不但支持众多的条码格式,而且有各种语言的实现版本,它支持的语言包括:Java, C++, C#, ...

  10. 在一个SQL Server表中的多个列找出最大值

    在一个SQL Server表中一行的多个列找出最大值 有时候我们需要从多个相同的列里(这些列的数据类型相同)找出最大的那个值,并显示 这里给出一个例子 IF (OBJECT_ID('tempdb..# ...