在css中浮动与清除浮动功能是我们开发中常用到的一个功能了，下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧．

float脱离文本流，可是为什么文字却会有环绕的效果，这点实在是神奇，于是乎就去问了师匠：

Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.

float其实是脱离了常规流，当然这么说肯定是听不懂的啦，我们来看一个示例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>文字环绕</title>
 <style type="text/css">
  html, body {
   margin: 0 auto;
   padding: 0;
  }

.container {
   width: 300px;
  } 
  div {
   box-sizing:border-box;
  }
  img {
   float: left;
  }
  .div1 {
   border: #c2ffaa 2px solid;
   height: 50px;
   width: 20px;
   float: left;
  }

.div2 {
   border: #e7a6b2 2px solid;
   height: 50px;
   width: 70px;
  }

.div3 {
   border: #a2c5e2 2px solid;
   height: 50px;
   width: 20px;
  }
 </style>
</head>
<body>
<div class="container">
 <!-- <img src="logo2013.png">
 <p>这是一段文字，This is Chinese,
this is English，Hello World,
Hello Sky....</p> -->
 <div class="div1"></div>
 <div class="div2">1</div>
 <div class="div3"></div>
</div>
</body>
</html>

好了，很显然，有一种看上去覆盖的效果，实际上，这是由渲染次序决定的：

A float can overlap other boxes in the
normal flow (e.g., when a normal flow box next to a float has negative
margins). When this happens, floats are rendered in front of non-positioned
in-flow blocks, but behind in-flow inlines.

如果一个 float 元素覆盖在了一个在常规流里的元素 那么 float 元素会在没有用 position 定位的块级元素之前渲染

看看，又和position扯上关系，而且position还能决定渲染顺序，顿时感觉好麻烦。

而至于文字，不多说，基本上属于渲染设定类，人家就是会避开浮动部分显示。

在使用浮动的时候经常会遇到一个古怪的事情：

img {
  float: right;
}

见证奇迹的时刻到了！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.

让我们加入一些新的CSS样式：

.clearfix {
  overflow: auto;
}
现在再看看发生了什么：

这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：

.clearfix {
  overflow: auto;
  zoom: 1;
}
有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。

CSS浮动与清除浮动(overflow)例子的更多相关文章

  1. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  2. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  3. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  4. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  5. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  6. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  7. CSS浮动和清除浮动

    1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...

  8. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  9. float浮动与清除浮动

    浮动: 浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止.文档的普通流中的块框会当浮动框不存在一样.但会影响内联框(通常是文本)的排列. 属性值有:left,right,none; ...

随机推荐

  1. 本周推荐7款CSS3实现的动态特效

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  2. Java程序猿面试体会，还没找到工作的“猿猿们”看过来！

    类似的话题,我大约在几个月前跟大家聊过. 这一次,我要依据这段时间的体会,再给大家整理一下.     今天,非常轻松地拿到了神州数码的offer. 尽管工资不是特别高,尽管非常多人一毕业就能进入这种公 ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  4. UNIX网络编程调试工具：tcpdump、netstat和lsof

    tcpdump程序 tcpdump一边从网络读入分组一边显示关于这些分组的大量信息.它还能够只显示与所指定的准则匹配的那些分组. netstat程序 netstat服务于多个目的: (1)展示网络端点 ...

  5. 转换到 StoryBoard 的公布说明（Converting to Storyboards Release Notes）

    转换到 StoryBoard 的公布说明(Converting to Storyboards Release Notes) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl ...

  6. Android Studio优秀插件汇总

  7. linux sort 、uniq 命令

    以文件的每行为单位,从左往右依次按ascii码进行比较 sort sort.txt #默认为升序 -u:去除重复行 sort -u sort.txt -r:降序排列 sort -r sort.txt ...

  8. javascript 新知识

     document.compatMode 属性 BackCompat: Standards-compliant mode is not switched on. (Quirks Mode)  标准模式 ...

  9. 图片压缩兼修改md5

    概述 一个桌面程序,能修改图片的尺寸和质量,并且通过加水印的方式修改图片的md5等值. 详细 代码下载:http://www.demodashi.com/demo/13498.html 一.程序截图 ...

  10. android中checkbox的padding引发的问题

    自己定义checkbox中的勾选框图标.这次由于想偷懒.图标弄的大了些.然后一系列的问题就都引出来了. 1.图标比checkbox的layout_height高.看不见了. 非常吐血吧,Compoun ...