首页 > 代码库 > float/文档流

float/文档流

2024-10-14 04:43:02   216人阅读

  • 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>
      View Code
    • 父级浮动     问题:页面中所有浮动元素都加浮动，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>
      View Code
    • 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>
      View Code
    • 空标签          问题: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>
      View Code
    • 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>
      View Code
    • 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>
      View Code
    • 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>
        View Code
  • 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/文档流


联系
我们