一.什么是浮动？

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. org.apache.http.ProtocolException: Target host is not specified

    对于httpClient4.3访问指定页面,可以从下面的demo抽取方法使用. 注意:对于URL必须使用 http://开始,否则会有如下报错信息: Caused by: org.apache.htt ...

  2. Oracle10g 回收站及彻底删除table : drop table xx purge

    drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 1.通过查询回收站user_recyclebin获取被删除的表信息, ...

  3. python lambda 用法

    可以视lambda为一个简易的函数,它不需要return,形式简单 #冒号左边是变量 #冒号右边是返回值 例: >>> def f (x): return x**2 ... > ...

  4. 怎样成为一名PHP专家？

    当浏览各类与PHP相关的博客时,比如Quora上的问题,谷歌群组,简讯和杂志,我经常注意到技能的等级分化.问题都类似于“我如何连接到MySQL数据库?”或者“我该如何扩展邮件系统才能在每小时发送超过一 ...

  5. Flash Builder 4.6 找不到所需的Adobe Flash Player

    问题: 安装完Flash Builder 4.6 ,第一次运行项目,出现如下错误提示: “Flash Builder 找不到所需版本的 Adobe Flash Player.您可能需要安装该版本的 F ...

  6. Vim插件列表

    01.helm(Vim-Swoop) 02.ap/vim-buftabline 03.wesleyche/SrcExpl 04.vim proc 05.vim shell 06.dhruvasagar ...

  7. 三个入侵的必备小工具-lcx.exe、nc.exe、sc.exe

      lcx.exe的使用方法 以前抓肉鸡都是通过1433弱口令,然后.. 但是发现很多服务器开了1433,3389,但是终端是连不上的,因为服务器本身是在内网,只对外开放了1433端口,幸好有lcx. ...

  8. 解决windows下vim方向键变成 ABCD 的问题

    一.问题描述: windows下面要安装git --> 安装了 msys2 -->安装并更新了 vim(7.4),然后在使用过程中发现vim不能使用  BACKSPACE 键,按方向键会打 ...

  9. 如何把Excel另存为XML格式文件（快速转换）

    这时,我们尝试另存为另一种文件类型: XML电子表格2003(*.xml)

  10. SSMS错误代码大全

    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足,无法处理此 ...