• 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. appium + Python + iOS 滑屏方法（appium版本大于1.5）

    之前一直在搞android的自动化,滑动操作一直都用swipe(),比如: he1 = int(dr.get_window_size()['height'] * 0.8)he2 = int(dr.ge ...

  2. su: Authentication failure

    su: Authentication failure问题解决: su 命令切换失败,提示su: Authentication failure,只要你sudo passwd root过一次之后,下次再s ...

  3. 配置cas可外网访问

    把应用程序tomcat下的conf下的context.xml里配置内容修改 如把: D:\apache-tomcat-APP\conf\context.xml <Resource name=&q ...

  4. 将EXCEL表中的数据轻松导入Mysql数据表

    转载自:http://blog.163.com/dielianjun@126/blog/static/164250113201042310181431/ 在网络上有不较多的方法,在此介绍我已经验证的方 ...

  5. android仿QQ的SlideMenu

    这其实很简单就可以实现,只需要自定义一个View继承自HorizontalScrollView 1,新建一个项目,再新建一个MySlideMenu继承HorizontalScrollView publ ...

  6. 201621123033 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 2 ...

  7. 附录A培训实习生-面向对象基础类和实例(1)

    对象是一个自包含的实体,用一组可识别的特性和行为来标识. 面向对象编程,Object-Oriented Programming,其实就是针对对象进行编程的意思. 类就是具有相同属性和功能的对象的抽象的 ...

  8. Luogu3953 NOIP2017逛公园（最短路+拓扑排序+动态规划）

    跑一遍dij根据最短路DAG进行拓扑排序,按拓扑序dp即可.wa了三发感觉非常凉. #include<iostream> #include<cstdio> #include&l ...

  9. [洛谷P4838]P哥破解密码

    题目大意:求长度为$n$的$01$串中,没有连续至少$3$个$1$的串的个数 题解:令$a_1$为结尾一个$1$的串个数,$a_2$为结尾两个$1$的串的个数,$b$为结尾是$0$的串的个数.$a_1 ...

  10. MySQL in查询优化

    https://blog.csdn.net/gua___gua/article/details/47401621 MySQL in查询优化<一> 原创 2015年08月10日 17:57: ...