• float : left | right | none | inherit;
  • 文档流是文档中可显示对象在排列时所占用的位置。
  • 浮动的定义: 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
  • clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素。clear:both;在左右两侧均不允许浮动元素。
  • 清除浮动方法
    • 加高度　　    问题:扩展性不好

      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                height:200px;
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box">
      
            <div class="item"></div>
      
        </div>
      
    </body>
      
</html>
    • 父级浮动     问题:页面中所有浮动元素都加浮动，margin左右自动失效(floats bad!) 
      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                float: left;
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box">
      
            <div class="item"></div>
      
        </div>
      
    </body>
      
</html>
    • inline-block  问题:margin左右auto失效 
      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                display: inline-block;
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box">
      
            <div class="item"></div>
      
        </div>
      
    </body>
      
</html>
    • 空标签          问题:ie6最小高度19px;(解决后ie6下还有2px偏差) 
      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
            .clearfix{
      
                clear:both;
      
            }
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box">
      
            <div class="item"></div>
      
            <div class="clearfix"></div>
      
        </div>
      
    </body>
      
</html>
    • br清浮动      问题:不符合工作中:结构、样式、行为，三者分离的要求 
      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box">
      
            <div class="item"></div>
      
            <br clear="all"/>
      
        </div>
      
    </body>
      
</html>
    • after伪类清浮动方法(现在主流方法) 
      <!DOCTYPE html>
      
<html>
      
    <head>
      
        <meta charset="UTF-8">
      
        <title></title>
      
        <style>
      
            .box{
      
                border:1px solid red;
      
            }
      
            .item{
      
                width:200px;
      
                height:200px;
      
                background-color: black;
      
                float:left;
      
            }
      
            .clearfix{
      
                *zoom:1;
      
            }
      
            .clearfix:after{
      
                content:" ";
      
                display: block;
      
                clear:both;
      
            }
      
            /*
      
             * after伪类：元素内部末尾添加内容；
      
             * :after{ //IE6,IE7下不兼容
      
             *         content:"添加的内容";
      
             * }
      
             * zoom:缩放
      
             *   触发IE下haslayout，使元素根据自身neir计算宽高
      
             *   FF不支持
      
             */
      
        </style>
      
    </head>
      
    <body>
      
        <div class="box clearfix">
      
            <div class="item"></div>
      
        </div>
      
    </body>
      
</html>
    • overflow:hidden;清浮动方法    问题:需要配合宽度或者zoom兼容IE6，IE7
      • overflow:scroll | auto | hidden;  overflow:hidden;溢出隐藏(裁刀！)

        <!DOCTYPE html>
        
<html>
        
    <head>
        
        <meta charset="UTF-8">
        
        <title></title>
        
        <style>
        
            /*清除浮动：清除浮动元素的父级*/
        
            .box{
        
                border:1px solid red;
        
                overflow: hidden;
        
            }
        
            .item{
        
                width:200px;
        
                height:200px;
        
                background-color: black;
        
                float:left;
        
            }
        
        </style>
        
    </head>
        
    <body>
        
        <div class="box">
        
            <div class="item"></div>
        
        </div>
        
    </body>
        
</html>
  • BFC、haslayout
    • BFC(block formatting context)标准浏览器　

      • float的值不为none
      • overflow的值不为visible
      • display的值为table-cell,table-caption,inline-block中的任何一个
      • position的值不为relative和static
      • width | height | min-width | min-height:(!auto)　
    • haslayout  IE浏览器
      • writing-model:tb-rl
      • -ms-writing-model:tb-rl
      • zoom:{!normal}
  • 浮动的特征
    • 块在一排显示
    • 内联支持宽高
    • 默认内容撑开宽度
    • 脱离文档流
    • 提升层级半层　　

float/文档流的更多相关文章

  1. Css问题 margin float 文档流 背景图底部充满

    今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; backgrou ...

  2. float的元素脱离文档流，但不完全脱离，只是提升了半层；

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

  3. 文档流 css中间float clear和布局

    文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...

  4. 一天搞定CSS： 浮动（float）及文档流--10

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

  5. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  6. 文档流 css中的float clear与布局

    文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;" ...

  7. 页面标准文档流、浮动层、float属性（转）

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  8. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

  9. css布局与文档流的关系之float（浮动）

    所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...

随机推荐

  1. thrift 调取 python php go 客户端代码

    golang package main import ( "fmt" "git.apache.org/thrift.git/lib/go/thrift" &qu ...

  2. [转]Android UI 自动化测试

    介绍 Android测试支持库包含UI自动化模块,它可以对Android应用进行自动黑盒测试.在API Level 18中引入了自动化模块,它允许开发者在组成应用UI的控件上模仿用户行为. 在这个教程 ...

  3. OpenCV入门：(五：更改图片对比度和亮度)

    1. 理论 图片的转换就是将图片中的每个像素点经过一定的变换,得到新像素点,新像素点组合成一张新的图片. 改变图片对比度和亮度的变换如下: 其中α和β被称作增益参数(gain parameter)和偏 ...

  4. 虚拟现实-VR-UE4-创建C++版工程

    首先,创建C++版本的UE4 项目工程,我使用的是4.12.3版本,据了解,新版本后面的编译都是vs2015 所以,想要创建C++版本的工程,就需要安装vs2015 至于vs2015的安装,自己百度吧 ...

  5. HDU 5794 A Simple Chess Lucas定理+dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5794 题意概述: 给出一个N*M的网格.网格上有一些点是障碍,不能经过.行走的方式是向右下角跳马步.求 ...

  6. HDU 3699 A hard Aoshu Problem（暴力枚举）（2010 Asia Fuzhou Regional Contest）

    Description Math Olympiad is called “Aoshu” in China. Aoshu is very popular in elementary schools. N ...

  7. winform label去背景

    以pictureBox上面显示一个不需要背景的label为例: 1.保证label的父控件是该pictureBox: 2.label的color属性为transParent:

  8. windows bat批处理基础命令学习教程(转载)

    一.基础语法: 1.批处理文件是一个“.bat”结尾的文本文件,这个文件的每一行都是一条DOS命令.可以使用任何文本文件编辑工具创建和修改.2.批处理是一种简单的程序,可以用 if 和 goto 来控 ...

  9. Java进阶

    Java进阶(一)Annotation(注解) Java进阶(二)当我们说线程安全时,到底在说什么 Java进阶(三)多线程开发关键技术 Java进阶(四)线程间通信方式对比 Java进阶(五)NIO ...

  10. 前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)实现下

    提醒自己:上一篇文章属于纯理论的文章,我自己有的部分之从网上摘抄的,我自己也是不理解的.或许过一段日子我就能全明白了.我自己还是喜欢实战,做几个例子就明白了. 怎么做让自己网页的标签来实现语义化,我直 ...