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

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

float:left :表示向左浮动

float：right：表示向右浮动

float：none：表示初始值

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

可以看一下代码的演示

hmtl

  1.  <body>
  2.      <div class="one">
  3.          <div class="left"></div>
  4.      </div>
  5.  </body>

float：left属性

代码

  1.  .left{
  2.              width: 100px;height: 100px;background: plum;float: left;
  3.          }

演示

float：right属性

代码

  1.  .right{
  2.              width: 100px;height: 100px;background: plum;float: right;
  3.          }

演示

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

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

1.overflow:hidden(不推荐)

优点：代码简洁

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

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

  1.    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  2.          content: "";
  3.          display: block;
  4.          height: 0;
  5.          clear:both;
  6.          visibility: hidden;
  7.      }
  8.      .clearfix{
  9.          *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  10.      }
  11.  
  12.  <body>
  13.      <div class="fahter clearfix">
  14.          <div class="big">big</div>
  15.          <div class="small">small</div>
  16.          <!--<div class="clear">额外标签法</div>-->
  17.      </div>
  18.      <div class="footer"></div>
  19.  </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. nosql概叙

    关系型数据库管理系统:按照预先设置的组织架构,将数据存储在物理介质上 数据之间可以做关联操作

  2. sklearn中的多项式回归算法

    sklearn中的多项式回归算法 1.多项式回归法多项式回归的思路和线性回归的思路以及优化算法是一致的,它是在线性回归的基础上在原来的数据集维度特征上增加一些另外的多项式特征,使得原始数据集的维度增加 ...

  3. 十 Servlet

    5 web资源: 在http协议当中,规定了请求和响应双方,客户端和服务器.与web相关的资源. 静态资源:       html.css.css动态资源:           Servlet/jsp ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：插入符

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 区块链 - 哈希(Hash)

    章节 区块链 – 介绍 区块链 – 发展历史 区块链 – 比特币 区块链 – 应用发展阶段 区块链 – 非对称加密 区块链 – 哈希(Hash) 区块链 – 挖矿 区块链 – 链接区块 区块链 – 工 ...

  6. 视频编解码 基本概念：GOP

    前言 产品开发要求添加视频剪辑功能,翻阅有关的文档,查到了GOP(group of pictures)这个概念. 解析 GOP说白了就是两个I帧之间的间隔.比较说GOP为120,如果是720p60的话 ...

  7. XV6源代码阅读-虚拟内存管理

    Exercise1 源代码阅读 1.内存管理部分: kalloc.c vm.c 以及相关其他文件代码 kalloc.c:char * kalloc(void)负责在需要的时候为用户空间.内核栈.页表页 ...

  8. 冰蝎动态二进制加密WebShell基于流量侧检测方案

    概述 冰蝎是一款新型动态二进制加密网站工具.目前已经有6个版本.对于webshell的网络流量侧检测,主要有三个思路.一:webshell上传过程中文件还原进行样本分析,检测静态文件是否报毒.二:we ...

  9. 7个现在就该学习Python 的理由【80%的人都不知道】

    Python 是一门更注重可读性和效率的语言,尤其是相较于 Java,PHP 以及 C++ 这样的语言,它的这两个优势让其在开发者中大受欢迎. 诚然,它有点老了,但仍是 80 后啊 —— 至少没有 C ...

  10. Debian安装wine运行Windows软件

    1.sudo dpkg --add-architecture i386,使系统支持32位应用 2.wget -nc https://dl.winehq.org/wine-builds/Release. ...