在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. 查看物体A是否被相机B渲染

    using UnityEngine; using System.Collections; public class Test : MonoBehaviour { public GameObject a ...

  2. Decorator Pattern (装饰者模式)

    装饰者模式( Decorator Pattern ) 意图 : 动态的给一个对象添加一些额外的功能,IO这块内容体现出了装饰模式,Decorator模式相比生成子类更为灵活. 角色 : 1)抽象构件角 ...

  3. JAVA生成解析二维码

    package com.mohe.twocode; import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.B ...

  4. 移动端项目中 @2x 图 和 @3x 图 的使用

    移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片.通过@media (媒体查询),判断设备的dpr. @mixin ...

  5. vim 查找和替换命令 替换/n和\n

    一. 字符串的查找 1. vim 中用 / 和 ? 来查找字符串,两者的区别是: /string 会高亮显示光标后匹配的第一个字符串,回车后光标移到该字符串的第一个字母: ?string 会高亮显示光 ...

  6. eclipse maven Cannot change version of project facet Dynamic web module to 3.0

      eclipse maven Cannot change version of project facet Dynamic web module to 3.0 (eclipse 修改maven项目的 ...

  7. Java多线程具体解释

    Java多线程具体解释 多线程简单介绍 概述 多线程(multithreading).是指从软件或者硬件上实现多个线程并发运行的技术.具有多线程能力的计算机因有硬件支持而可以在同一时间运行多于一个线程 ...

  8. JDBC JdbTemplate&NamedParameterJdbcTemplate（Spring工具类）

    使用该工具类需要从spring开发包中导入spring.jar和commons-logging.jar,这个模板是线程安全的.   JdbcTemplate: public class JdbcTem ...

  9. [SDOI2016Round1]解题报告

    Day1 T1: 题意:求∑n−1i=0∑m−1j=0max((i xor j)−k,0) 由于是抑或操作.每一位都是独立的,所以能够一位一位的算贡献. f[i][a][b][c]表示第i位时.每一个 ...

  10. hdu 4779 Tower Defense （思维+组合数学）

    Tower Defense Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) ...