一、概念理解

　　浮动：顾名思义先浮后动，浮动的对象会先漂浮起来，离开自己原来的位置（也就是所谓的脱离文档流），后动的意思是，它的后面的元素会向它原来的位置动起来。

二、注意事项

　　1.当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱的现象。（我们可以通过清除浮动的方式进行解决这个问题）

　　2.当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加。

　　3.清除浮动：就是可以去掉前面对象的浮动对后面对象的印象，是加给未浮动元素的。

　　　　语法：clear：none(默认值，允许两边都可以有浮动) both(左右两侧都不允许有浮动) left(左侧不允许有浮动) right(右侧不允许有浮动)。

　　　　清除浮动方法总结：

　　　　　　[1].额外标签法：W3C建议在父元素的末尾增加一个css为”clear:both”的元素，强迫容器适应它的高度以便装下所有浮动的元素。(缺点是会增加代码)。
　　　　　　[2].父元素使用overflow的方法:通过设置父元素的overflow的属性为hidden，是最简单的清除浮动的方法，但是如果子元素使用定位布局，将很难实现。
　　　　　　[3].利用伪对象after方法：定义一个类，使用伪对象after

控制浮动元素的影响，网上最流行的清除浮动的代码：
 
　　　　　　　　.clearFix{clear:both;display:block

;visibility:hidden;height:0;line-height:0;contect:””;} (.clearFix{zoom:1;}解决IE6/7兼容性问题)。

　　4.另外一种解决浮动布局错乱问题的方式：给浮动元素的父元素加宽度。

三、使用方式

　　我们可以直接定义好浮动的CSS，然后应用给指定的需要浮动的元素就好了，方式非常简单易用。比如：

　　

 <!DOCTYPE html>

 <html>

     <head>

         <title>浮动测试</title>

         <style type="text/css">

             .right{float:right;background-color:Red;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-right:20px;}

             .left{float:left;background-color:Blue;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-left:20px;}

         </style>

     </head>

 <body>

     <div class="right"></div>

     <div class="left"></div>

 </body>

 </html>

运行效果如下：

就是这么简单，有什么不懂得可以加我QQ：1281616040细聊。。。。

　　　　

带你熟悉CSS浮动的更多相关文章

  1. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  2. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  3. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  4. CSS浮动讲解好文章推荐

    经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!

  5. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  6. CSS浮动专题!

    在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...

  7. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  8. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  9. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

随机推荐

  1. HttpClient连接池的连接保持、超时和失效机制

    HTTP是一种无连接的事务协议,底层使用的还是TCP,连接池复用的就是TCP连接,目的就是在一个TCP连接上进行多次的HTTP请求从而提高性能.每次HTTP请求结束的时候,HttpClient会判断连 ...

  2. HDOJ 4336 Card Collector

    容斥原理+状压 Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  3. HDOJ 1520 Anniversary party

    树形DP....在树上做DP....不应该是猴子干的事吗?  Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Li ...

  4. CentOS编译安装Apache 2.4.x时报错:configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    先前按照这篇文章“CentOS6.x编译安装LAMP(2):编译安装 Apache2.2.22”去编译安装Apache2.2.x版本时,安装得挺顺利,今天换成Apache2.4.x版本,安装方法一样, ...

  5. 第2月第1天 命令（Command）模式

    http://www.tracefact.net/Design-Pattern/Command.aspx 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请 ...

  6. 【转】php 下载保存文件保存到本地的两种实现方法

    来源:http://www.jb51.net/article/40485.htm 第一种: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php function d ...

  7. 【转】 js怎么区分出点击的是鼠标左键还是右键？

    IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0  默认.没有按任何按钮. events. ...

  8. 实战Centos系统部署Codis集群服务

    导读 Codis 是一个分布式 Redis 解决方案, 对于上层的应用来说, 连接到 Codis Proxy 和连接原生的 Redis Server 没有明显的区别 (不支持的命令列表), 上层应用可 ...

  9. Linux下6种优秀的邮件传输代理

    导读 在互联网上,邮件客户端向邮件服务器发送邮件然后将消息路由到正确的目的地(其他客户),其中邮件服务器使用的一个网络应用程序称为邮件传输代理(MTA). 最好的Linux邮件传输代理(MTAs) 邮 ...

  10. MRC

    MRC 关于NSString,retainCount为-1 C方法中含有Copy的方法名, 都要释放 例如CFRealse(ref) 字符串常量,因为one为字符串常量,系统不会回收,也不会对其作引用 ...