• 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. python基础——重访类型分类

    python基础--重访类型分类 对象根据分类来共享操作:例如,字符串.列表和元组都共享诸如合并.长度和索引等序列操作. 只有可变对象(列表.字典和集合)可以原处修改:我们不能原处修改数字,字符串.元 ...

  2. Redis进阶：数据持久化，安全，在PHP中使用

    一.redis数据持久化 由于redis是一个内存数据库,如果系统遇到致命问题需要关机或重启,内存中的数据就会丢失,这是生产环境所不能允许的.所以redis提供了数据持久化的能力. redis提供了两 ...

  3. Linux硬盘性能检测

    对于现在的计算机来讲,整个计算机的性能主要受磁盘IO速度的影响,内存.CPU包括主板总线的速度已经很快了. 基础检测方法 1.dd命令 dd命令功能很简单,就是从一个源读取数据以bit级的形式写到一个 ...

  4. Oracle 学习笔记（四）

    ​oracle表查询 使用逻辑操作符号  查询工资高于 500 或者是岗位为 MANAGER 的雇员,同时还要满足他们的姓名首字母为大写 J SELECT * FROM emp WHERE (sal ...

  5. adb 命令模拟按键事件

    转自:http://blog.csdn.net/jlminghui/article/details/39268419 例子:adb shell input keyevent 4 #这条命令相当于按了设 ...

  6. 「暑期训练」「基础DP」 Common Subsequence （POJ-1458）

    题意与分析 很简单:求最长公共子序列. 注意子序列与子串的差别:一个不连续一个连续.一份比较好的参考资料见:https://segmentfault.com/a/1190000002641054 状态 ...

  7. (三)宇宙大战 Space Battle -- 场景SCENE切换、UserDefaults统计分数、Particle粒子效果

    此<宇宙大战 Space Battle>SpirteKit手机游戏教程共分为三系列: (一)宇宙大战 Space Battle -- 新建场景Scene.精灵节点.Particle粒子及背 ...

  8. 孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1

    孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1 (完整学习过程屏幕记录视频地址在文末) 感觉用requests获取到网页的html源代码后,更重要的工作其实是分析得到的内 ...

  9. 杜绝网上压根没测过就乱写之 《oracle mybatis 返回自增主键 》

    面试过好多人,包括自己也属于这么一个情况: 遇到问题直接去网上查,一般都可以查到解决方案.其中也包括一些基本的面试资料的答案. 其实有很多答案也都是正确的,但是还是存在一些压根就是胡乱抄来的答案,也不 ...

  10. [CH5302]金字塔

    题面 虽然探索金字塔是极其老套的剧情,但是有一队探险家还是到了某金字塔脚下.经过多年的研究,科学家对这座金字塔的内部结构已经有所了解.首先,金字塔由若干房间组成,房间之间连有通道.如果把房间看作节点, ...