之前自己对于清除浮动的用法比较模糊 ，如果用到的话，一般都是采用简单粗暴的方式解决，就是直接用overflow：hidden，但是越用久就会发现其实有BUG，这个BUG正是overflow：hidden带来的，因为细究overflow：hidden还有一个默认效果是溢出隐藏.,如果要在子元素里再添一个div，div往下移动的话，超过了子元素的高度就会做溢出隐藏处理，所以效果不佳，所以后来自学了另一种清除浮动的方法，就是伪类.clearFix:after{content:'.';height:0;clear:both;visibility:hidden;display:block;}。这种方法比较OK的，之前的BUG不会出现，只是在做网页的时候，一定要记住一点，就是伪类的兼容性问题，ie6是不支持主要的写法的，所以加.clearFix{*zoom:1;}.只是自己的一些理解！与君共勉！

对clear float 的理解的更多相关文章

  1. CSS3 float深入理解浮动资料整理

    CSS浮动(float,clear)通俗讲解 CSS 浮动 CSS float浮动的深入研究.详解及拓展(一) CSS float浮动的深入研究.详解及拓展(二) 1.浮动实现图文环绕(理解难点) 浮 ...

  2. 对css中clear元素的理解

    clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...

  3. 转载：Clear Float

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...

  4. 对float的理解

    从IE6下的双边距引出 对一个div设置float:left;同时设置了margin-left:100px时在IE6下会出现双边距. 有两种解决办法: 1,推荐办法.加display:inline 2 ...

  5. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  6. 典型的检查对float精度理解的代码

    -rand()%); vy = ); vz = ); pList_particle[i].m_velocity = Vector3(vx,vy,vz); ... 1,3行代码的vx和vz的值域可以通过 ...

  7. css样式 float的理解

    float w3cSchool里解释说, 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 ...

  8. CSS demo:flaot & clear float

    1,首先,我们布局主要的div块: 例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,增加基本浮动 如今我们想让红色div放到绿色div右边,我们在两 ...

  9. float的理解

    1.浮动包裹性——浮动具有让元素按displya:inline-block显示(如果没有设置宽度和高度,则它可以显示的尽量窄高 度尽量小).2.浮动破坏性——浮动元素漂浮在标准流之上(但没有脱离文档流 ...

随机推荐

  1. MarkDown 常用语法教程

    MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 + 列表文本前使用 [减号+空格] * 列表文本 ...

  2. 使用swagger实现web api在线接口文档

    一.前言 通常我们的项目会包含许多对外的接口,这些接口都需要文档化,标准的接口描述文档需要描述接口的地址.参数.返回值.备注等等:像我们以前的做法是写在word/excel,通常是按模块划分,例如一个 ...

  3. php数组--2017-04-16

    一.定义数组 (1)索引数组 $arr=array(1,2,3,3); (2)关联数组  类似于集合 $arr1=array("one"=>"111",& ...

  4. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  5. AngularJs 4大核心

    放弃了IE8, 4大核心: MVC: 数据模型,视图层,业务逻辑和控制模式(控制器), 为何MVC不是设计模式呢?(23种设计模式里没有MVC,MVC模式的目的就是实现Web系统的职能分工,超越了设计 ...

  6. 主机ping通虚拟机，虚拟机ping通主机解决方法（NAT模式）

    有时候需要用虚拟机和宿主机模拟做数据交互,ping不通是件很烦人的事,本文以net模式解决这一问题. 宿主机系统:window7 虚拟机系统:CentOs7 连接方式:NAT模式 主机ping通虚拟机 ...

  7. C++学习笔记1（标准的输入输出）

    前言: 个人一直以来比较懒,最近才准备记录一下自己学习C++的学习过程,希望自己能在写博客的时候能够坚持下去,欢迎大家在博客中支出存在的问题,好了不多说了,自己能坚持下去.我准备在我的博客中通过与C语 ...

  8. 关于Java中Arrays.sort()方法TLE

    最近一直在练用Java写题,今天无意发现一道很简单的二分题(链接),我一开始是直接开int[]数组调用Arrays.sort()去排序,没想到TLE了,原来是因为jdk中对于int[]的排序是使用快速 ...

  9. 根据GPS经纬度判断当前所属的市区

    这个事情分两步走 1. 拿到行政区划的地理围栏数据 2. 根据GPS定位判断一个点是否落在地理围栏的多边形区域里. 1. 获取行政区划的地理围栏数据可以利用百度API.打开以前我的一个例子在chrom ...

  10. Java设计模式之（建造者模式）

    建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式通常包括下面几个角色: 1. builder:抽象建造者,给出一个抽象接口,以规范产品对象的各个组 ...