float/文档流

Posted 2020-09-26 左耳_fly

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了float/文档流相关的知识，希望对你有一定的参考价值。

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/文档流的主要内容，如果未能解决你的问题，请参考以下文章

float 浮动文档流和文字流区别

float/文档流

float/文档流/清除浮动

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

float脱离文档流，清除浮动

BFC以及文档流