float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float有四个属性分别是：left,right,none,inherit

float:left :表示向左浮动

float：right：表示向右浮动

float：none：表示初始值

float：inherit：规定应该从父元素继承 float 属性的值

可以看一下代码的演示

hmtl

 <body>

     <div class="one">

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

     </div>

 </body>

float：left属性

代码

 .left{

             width: 100px;height: 100px;background: plum;float: left;

         }

演示

float：right属性

代码

 .right{

             width: 100px;height: 100px;background: plum;float: right;

         }

演示

float还可以用来实现横向两列布局，三列布局，水平菜单等，这里就不列举了。

当你想要清除浮动时，可以在父元素上加入以下几种方法

1.overflow:hidden(不推荐)

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

2.使用after伪元素清除浮动（推荐使用）

   .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/

         content: "";

         display: block;

         height: 0;

         clear:both;

         visibility: hidden;

     }

     .clearfix{

         *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

     }

 <body>

     <div class="fahter clearfix">

         <div class="big">big</div>

         <div class="small">small</div>

         <!--<div class="clear">额外标签法</div>-->

     </div>

     <div class="footer"></div>

 </body>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

CSS属性之float浮动属性的更多相关文章

  1. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  2. [转] CSS float 浮动属性

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

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

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

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

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

  5. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  6. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  7. CSS学习笔记：浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

  8. float浮动属性的基本常识

    CSS 浮动 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边 ...

  9. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

随机推荐

  1. Unity添加小米游戏SDK

    因为游戏要上线小米的平台,所以游戏就要添加小米SDK,整了3天总算是把小米SDK添加上了~~ 多亏找到了这个帖子:Unity3D接入小米盒子SDK. (小米人家论坛有官方贴出来的其他开发者的接入经验~ ...

  2. Windows7 wampServer3.0.6 Mutillidae2.7.12

    在Mac上访问虚拟机中的mutillidae,报403: By default, Mutillidae only allow access from localhost ***: Parallels ...

  3. swoole之建立 tcp server

    一.swoole的安装 参照官网:https://wiki.swoole.com/wiki/page/6.html 二.代码部分 服务端: <?php $host = "127.0.0 ...

  4. P1090 危险品装箱

    1090 危险品装箱 (25分)   集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清单,需要你 ...

  5. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'解决

    用XAMPP装装好mysql之后,mysql -uroot 连不上,报这个错误:   ERROR 2002 (HY000): Can't connect to local MySQL server t ...

  6. 从零到Django大牛的的进阶之路01

    搭建 创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 安装Django pip install django==1.11.11 创建工程 django-a ...

  7. MQTT 协议学习：Retained（保留消息） 与 LWT（最后遗嘱）

    背景导入 让我们来看一下这个场景: 你有一个温度传感器,它每三个小时向一个 Topic 发布当前的温度.那么问题来了,有一个新的订阅者在它刚刚发布了当前温度之后订阅了这个主题,那么这个订阅端什么时候能 ...

  8. 基于Ambari的WebUI实现服务缩容

    基于Ambari的WebUI实现服务缩容 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.实现服务的扩容 1>.进入到主机的管理界面 2>.查看主机的信息概览 3&g ...

  9. JWT跨域身份验证解决方案

    JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.本文介绍JWT的原理和用法. 1. 当前跨域身份验证的问题 Internet服务无法与用户身份验证分开.一般过程如下.1.用户 ...

  10. node - 读取cookie

    req.headers.cookie