• 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. 新手入门Sqlalchemy

    此文已由作者尤炳棋授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 入职考拉半年多,一直在从事KLQA平台的开发,KLQA平台后端是用基于python的flask框架搭建的.F ...

  2. javascript数据相关处理，序列化反序列化，数据编码与解码

    对象序列化简而言之,将对象转为字符串.在数据的传输过程中,经常会使用到对象序列化. javascript中常用的对象序列化:JSON.stringify(); javascript中常用的对象反序列化 ...

  3. json 处理日期格式

    @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") private Date createT ...

  4. React获取数据，假如为数组，使用map出现的问题

    在平时做项目的时候,使用到了redux, 如果获取服务器端的数据,例如返回一个  data = [1,2,3,4]data.map(item => item*2) , 这样使用的话如果数据正常获 ...

  5. 6.1 python+appium元素定位方式（登录app）

    1.0.0     :常见的十种元素定位方式 .driver.find_element_by_id() #id定位 .driver.find_element_by_name() #name定位(已经凉 ...

  6. python学习总结---网络编程

    网络编程 相关概念 - OSI七层模型:它从低到高分别是:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. - TCP/IP: 在OSI七层模型基础上简化抽象出来的一套网络协议簇,现在得到 ...

  7. 08-Mysql数据库----完整性约束

    总结:      1,not null 不能插入空,不设置可空       2,unique  单列唯一 create table department(name char(10) unique); ...

  8. 命令行编译 WPF

    在开发调试代码 WPF 时,经常需要在修改完成代码后,点击 Rebuild,然后到指定文件夹下点击打开对应的 .exe 验证程序是否正确, 可以通过以下命名实现修改程序后,点击一个 .bat 文件,直 ...

  9. kaldi常用文件查看指令

    目录 1. ark特征文件 2. FST文件 3. mdl模型文件 4. 决策树文件 5. ali.gz对齐文件 资料来自kaldi官方文档. 转载注明出处. 1. ark特征文件 copy-feat ...

  10. lintcode-109-数字三角形

    109-数字三角形 给定一个数字三角形,找到从顶部到底部的最小路径和.每一步可以移动到下面一行的相邻数字上. 注意事项 如果你只用额外空间复杂度O(n)的条件下完成可以获得加分,其中n是数字三角形的总 ...