• 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. Oracle11.2.0.3 RAC配置ODBC成功案例记录

    最终使用字符串如下: String url="jdbc:oracle:thin:@(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = scan- ...

  2. Selenium八大元素定位方式

    1.根据id来定位: import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.sele ...

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

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

  4. kaldi基于GMM的单音素模型 训练部分

    目录 1. gmm-init-mono 模型初始化 2. compile-train-graghs 训练图初始化 3. align-equal-compiled 特征文件均匀分割 4. gmm-acc ...

  5. POJ 2516 Minimum Cost（最小费用流）

    Description Dearboy, a goods victualer, now comes to a big problem, and he needs your help. In his s ...

  6. Jboss提示：Server already running on localhost

    最近在做项目中,经常遇到JBoss报如下提示:Server already running on localhost.这时Jboss显示已启动,但页面显示不出来.提示中给出了两种解决办法,运行新的服务 ...

  7. [HDU5956]The Elder

    题面在这里 题意 一个王国中的所有城市构成了一棵有根树,其根节点为首都,编号为1 树有边权,城市的记者每次向祖先移动\(d\)的路程需要的代价为\(d^2\), 如果祖先不是根还需要加上\(p\),求 ...

  8. AtCoder Grand Contest 025 Problem D - Choosing Points

    题目大意:输入$n,d1,d2$,你要找到$n^2$个整点 x, y 满足$0 \leqslant x, y<2n$.并且找到的任意两个点距离,既不是$\sqrt{d1}$,也不是 $\sqrt ...

  9. [学习笔记]Tarjan&&欧拉回路

    本篇并不适合初学者阅读. SCC: 1.Tarjan缩点:x回溯前,dfn[x]==low[x]则缩点. 注意: ①sta,in[]标记. ②缩点之后连边可能有重边. 2.应用: SCC应用范围还是很 ...

  10. springMvc--请求的跳转和传值

    springMvc--请求的跳转和传值 目录 forword跳转页面的三种方式 1.使用serlvet 2.使用Model对象 3.使用ModelAndView redirect跳转到页面 使用ser ...