1.  浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；

代码示例：

 <!DOCTYPE HTML >

 <html>

 <head>

     <meta charset='utf-8'/>

     <title>浮动元素的性质</title>

     <style type="text/css">

         *{

             margin:0;

             padding:0;

         }

         .box{

             width: 300px;

             height: 200px;

             padding: 50px;

             margin: 50px;

             background: #ccf;

         }

         .inner{

             width: 100px;

             height: 100px;

             background: #fcc;

             float: right;

         }

     </style>

 </head>

 <body>

     <div class='box'>

         <div class='inner'>浮动元素</div>

     </div>

 </body>

 </html>

效果图：

2.　浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；

代码示例：

 <!DOCTYPE HTML >

 <html>

 <head>

     <meta charset='utf-8'/>

     <title>浮动元素的性质</title>

     <style type="text/css">

         *{

             margin:0;

             padding:0;

         }

         .box{

             width: 400px;

             height: 200px;

             padding: 50px;

             margin: 50px;

             background: #ccf;

         }

         .inner{

             width: 100px;

             height: 100px;

             background: #fcc;

             float: left;

         }

         .notfloat{

             width: 200px;

             height: 200px;

             background: #cfc;

         }

     </style>

 </head>

 <body>

     <div class='box'>

         <div class='inner'>浮动元素</div>

         <div class='notfloat'>浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐。
　　　　　　　　　　　　　　　　　　　　边框和背景却忽略浮动元素而向上一个（这二为为父元素）任意非浮动元素靠齐

　　　　　　　</div>

     </div>

 </body>

 </html>

效果图：

3.  浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

代码示例：

 <!DOCTYPE HTML >

 <html>

 <head>

     <meta charset='utf-8'/>

     <title>浮动元素的性质</title>

     <style type="text/css">

         *{

             margin:0;

             padding:0;

         }

         .box{

             width: 400px;

             height: 200px;

             padding: 50px;

             margin: 50px;

             background: #ccf;

         }

         .inner{

             width: 100px;

             height: 100px;

             background: #fcc;

             float: left;

         }

         .notfloat{

             background: #cfc;

         }

     </style>

 </head>

 <body>

     <div class='box'>

         <div class='inner'>浮动元素</div>

         <span class='notfloat'>

             浮动元素后面的内联元素会向此浮动元素的外边距靠齐

         </span>

     </div>

 </body>

 </html>

效果图：

For My Lover, CC!

CSS浮动的3个特性（高手绕行）的更多相关文章

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

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

  2. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

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

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

  4. Css - 浮动布局

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

  5. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

  6. css 浮动问题详解

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  7. css浮动(float)及如何清除浮动

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

  8. [CSS]CSS浮动塌陷及解决办法

    一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...

  9. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

随机推荐

  1. 修改 nginx 默认端口

     修改 nginx 默认端口 nginx 解压目录下的  conf 目录下的 nginx.conf 修改对应端口

  2. https经过ngxin在web服务器收到http请求

    一. 问题描述: nginx代理nexus的时候页面不全,部分https地址自动转成http了,使用方案四解决的 浏览器输入https://www.mysite.com,后台通过request.get ...

  3. ASP.net/C#中如何调用动态链接库DLL

    动态链接库(也称为DLL,即为“Dynamic Link Library”的缩写)是Microsoft Windows最重要的组成要素之一,打开Windows系统文件夹,你会发现文件夹中有很多DLL文 ...

  4. 删除标注关联仿dda命令DIMDISASSOCIATE

    static void sk_ARXTestXDatamydimassoc(void) { // Add your code for command sk_ARXTestXData.mydimasso ...

  5. php 递归数据，三维数组转换二维

    public function sortarea($area, $parent_id = 0, $lev = 1){ static $list; foreach($area as $v){ if($v ...

  6. FFmpeg工具使用总结

    . 一. FFmpeg是什么? 简单说,FFmpeg就是一个很好的,免费的,开源的视频转换工具.详细说,FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依 ...

  7. C++基础知识：成员函数、对象拷贝、私有成员

    一.综述 类是我们自己定义的数据类型(新类型) 设计类时要考虑的角度: (1)站在设计和实现者的角度来考虑 (2)站在使用者的角度来考虑 (3)父类,子类 二.类基础 (1)一个类就是一个用户自己定义 ...

  8. 晦涩难懂的shell命令

    初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...

  9. 【Quartz】基本原理

    1 核心概念 1.1    核心元素 (1)Scheduler 任务调度器,是Quartz框架的核心,负责管理其他组件. (2)Trigger 触发器,用于定义任务调度的时间规则,有SimpleTri ...

  10. 安装vuecli和使用elememtUi

    首先需要下载node.js,这里只需要一步步的安装就可以,无需要做其他的事, 第二步:安装vue 第三步:安装脚手架 第四步: 由于国内访问npm比较慢,可以按照cnpm npm install -g ...