在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. Flutter 动画使用

    旋转动画  透明度变换动画  在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理 在Flutter中,可以通过动画库给wid ...

  2. 【转】如何成为Python高手

    http://www.aqee.net/how-to-become-a-proficient-python-programmer/ 这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人 ...

  3. Leet Code OJ 219. Contains Duplicate II [Difficulty: Easy]

    题目: Given an array of integers and an integer k, find out whether there are two distinct indices i a ...

  4. jQuery获取select中全部option值

    <select id="language"> <option value="">请选择</option> <optio ...

  5. HttpClient + PATCH support

    From - http://compiledexperience.com/blog/posts/patch-support-in-httpclient/ public static class Htt ...

  6. Linux程序调试GDB——数据查看

    查看栈信息 当程序被停住了,首先要确认的就是程序是在哪儿被断住的.这个一般是通过查看调用栈信息来看的.在gdb中,查看调用栈的命令是backtrace,可以简写为bt. (gdb) bt    #0 ...

  7. linux中echo的使用方法

    1.echo命令我们经常使用的选项有两个,一个是-n,表示输出之后不换行.另外一个是-e,表示对于转义字符按对应的方式处理,假设不加-e那么对于转义字符会按普通字符处理. 2.echo输出时的转义字符 ...

  8. mybatis实战教程(mybatis in action)之四:实现关联数据的查询

    有了前面几章的基础,对一些简单的应用是可以处理的,但在实际项目中,经常是关联表的查询,比如最常见到的多对一,一对多等.这些查询是如何处理的呢,这一讲就讲这个问题.我们首先创建一个Article 这个表 ...

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  10. GraphicsMagick 学习笔记

    两种最常用的图片处理工具:GraphicsMagick 或 ImageMagick,GM是IM的分支,这两个图片处理工具功能基本相同,各有特色.但他们并不是nodejs的插件,它们都是客户端软件,li ...