在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. windows系统IIS环境下安装memcache的方法

    1.首先下载memcached-1.2.1-win32.zip 下载地址http://download.csdn.net/detail/u011986449/8110579 这下是windows下的版 ...

  2. 打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)

    前言 近期在做项目时,使用了一个开源的下拉刷新ListView组件.极其的不稳定,bug还多.稳定的组件又写得太复杂了,jar包较大.在我的一篇博客中也讲述过下拉刷新的实现,即Android打造(Li ...

  3. 〖Qt编程〗Qt编程中的各种数据类型的相互转换

    char * 与 const char *的转换 char *ch1=”hello11″; const char *ch2=”hello22″; ch2 = ch1;//不报错,但有警告 ch1 = ...

  4. 双系统 ubuntu装完系统后 丢失原win系统启动项

    sudo update-grub 可以尝试以上命令 注意这里是先装的win 后装的ubuntu

  5. 【MySQL锁】MySQL悲观锁和乐观锁概念

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.本文将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍. 悲观锁(Pessimistic Lock) 悲观锁的 ...

  6. Ubuntu下设置redis让其他服务器访问

    修改redis配置文件,将 bind 127.0.0.1to bind 0.0.0.0Then restart your service (service redis-server restart) ...

  7. /usr/lib64改名字风波

    注:本文描述请勿模仿,仅限万一遇到这种情况一试. 一不小心做了一个操作: cd /usr mv lib64 lib64-bak 然后奇异的发现: cp不能用了!ls也不能用了…… 提示信息如下: -b ...

  8. MySQL Subquery

    Summary: in this tutorial, we will show you how to use the MySQL subquery to write complex queries a ...

  9. API 版本控制的几种方式

    个人建议:用content type,即放在Header里面!比如加一个Version:1.4.3 这篇文章写得很好,介绍了三种实现web api版本化的三种方式.我从评论里又收集到两种方式,所以一共 ...

  10. Python中使用UUID

    import uuid ... ... print uuid.uuid1() 生成的方法还有uuid2..n,具体参见官网LINK,包括参数细则