1 定义:CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

2 解释:浮动的元素,浮在界面上,脱离了HTML文本流。

  元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

  一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  浮动元素之后的元素将围绕它。

  浮动元素之前的元素将不会受到影响。

  如果图像是右浮动,下面的文本流将环绕在它左边:

  img { float:right; }

  float:属性

  left
  right
  none
  inherit

3 彼此相邻的浮动元素:

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

css总结12:CSS Float(浮动)的更多相关文章

  1. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  2. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. float浮动深入理解

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

  4. 清除float浮动造成影响的几种解决方案

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  5. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

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

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

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

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

  8. [转] CSS float 浮动属性

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

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

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

  10. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

随机推荐

  1. Des加解密(Java端和Js端配套)解析

    一.什么是DES加密        des对称加密,对称加密,是一种比较传统的加密方式,其加密运算.解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码( ...

  2. mysql 存储过程 事务处理 (转)

    BEGIN DECLARE t_error INTEGER DEFAULT 0;  DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET t_error=1; S ...

  3. 在 Docker 中运行 MySQL

    首先启用 Windows 10 的容器功能,然后去 Docker 的官网,下载安装包. 跟着安装程序走完流程,Docker 就在 Windows 上愉快的游起来啦~ 设置镜像地址 Docker 在创建 ...

  4. mysql复制原理与机制一

    复制原理:复制需要二进制日志记录数据库上的改变 slave的IO线程复制把master上的Binary log读取到本地的relay log里SQL线程负责把relay log恢复到数据库数据里 sh ...

  5. php单链表实现

    php单链表实现 <?php //单链表 class Hero{ public $no; public $name; public $nickname; public $next=null; f ...

  6. ES之四、Elasticsearch集群和索引常用命令

    REST API用途 elasticsearch支持多种通讯,其中包括http请求响应服务,因此通过curl命令,可以发送http请求,并得到json返回内容. ES提供了很多全面的API,常用的RE ...

  7. codeforces 985 D. Sand Fortress(二分+思维)

    Sand Fortress time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  8. Maven使用阿里云镜像

    Maven确实是个好用的东西,不过在国内的话下载速度不够快,推荐使用阿里云的镜像,配置方法还是比较简单,这里是全局的配置文件 settings.xml中的内容: <settings xmlns= ...

  9. 第13章 Spring框架的设计理念与设计模式分析

    13.1 Spring的骨骼架构 最核心的组件是:Core, Context, Bean. 13.1.1 Spring的设计理念 Spring最核心的组件是Bean组件.Spring解决的最关键的问题 ...

  10. Python中常用模块一

    random模块 import random # 应用数学计算 print(random.random()) # 取随机小数 范围是 0-1之间 # 应用抽奖 , 彩票 print(random.ra ...