一.什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

二.浮动元素的特点

  1. 元素浮动后会自动变成行块元素
  2. 浮动元素的父元素高度宽计算将忽略浮动子元素
  3. 浮动的元素绝对不会遮挡非浮动元素的内容（文字或图片）但会遮挡非浮动元素的布局

三.浮动元素的目的

  1. 文字环绕图片
  2. 水平方向上的布局

四.clear元素

clear作用是清楚浮动，本质是"避让"
       注：后出现的元素避让先出现的元素。

五. 清除浮动

可以给父元素添加overflow:hidden或者给父元素的子元素末尾再添加一个
      div并设置div的clear:both即可解决父元素不包含浮动子元素的问题。

Float（浮动）的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  4. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  5. float浮动深入理解

    [CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121)   1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  8. float浮动之后高度自适应失效解决方案

    float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>> ...

  9. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  10. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

随机推荐

  1. JS动态特性

    var arr=[]; arr['js']='jquery'; arr['css']='oocss'; var obj={}; for(var i in arr) { obj[i]=arr[i]; } ...

  2. P117、面试题18：树的子结构

    题目:输入两棵二叉树A和B,判断B是不是A的子结构.二叉树结点的定义如下:struct BinaryTreeNode{       int  m_nValue;       BinaryTreeNod ...

  3. 深入研究Java类加载机制

    类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行. 研究类加载机制的第二个目的是让程序能动态的控制类加载,比如热部署等,提高程序的灵活性 ...

  4. WINCE6.0 error C2220: warning treated as error问题解决

    今天在编译IMX515的BSP的时候,发现下面的编译错误问题: BUILD: [00:0000002476:PROGC ] BuildingCOMPILE Pass in F:\WINCE600\PL ...

  5. 【HDOJ】2242 考研路茫茫——空调教室

    tarjan缩点,然后树形dp一下可解.重点是重边的处理. /* 2242 */ #include <iostream> #include <sstream> #include ...

  6. poj2391，poj2455

    这两题本质是一致的: 一般来说,对于最长(短)化最短(长)的问题我们一般都使用二分答案+判定是否可行 因为这样的问题,我们一旦知道答案,就能知道全局信息 拿poj2455举例,对于二分出的一个答案,我 ...

  7. Hibernate解决高并发问题之：悲观锁 VS 乐观锁

    高并发问题是程序设计所必须要解决的问题,解决此类问题最主要的途径就是对对程序进行加锁控制.hibernate对加锁机制同样做出了实现,常用加锁方式为悲观锁和乐观锁.悲观锁指的是对数据被外界(包括本系统 ...

  8. Java [Leetcode 283]Move Zeroes

    题目描述: Given an array nums, write a function to move all 0's to the end of it while maintaining the r ...

  9. Android 中的MVP 模式

    MVP模式的核心思想: MVP把Activity中的UI逻辑抽象成View接口,把业务逻辑抽象成功接口,Model类还是原来的Model. MVC 其中View层其实就是程序的UI界面,用于向用户展示 ...

  10. Java虚拟机笔记 – JVM 自定义的类加载器的实现和使用2

    1.用户自定义的类加载器: 要创建用户自己的类加载器,只需要扩展java.lang.ClassLoader类,然后覆盖它的findClass(String name)方法即可,该方法根据参数指定类的名 ...