浮动及浮动相关问题(初次)

这仅是我个人看到的，如果补充，还请大家不要吝啬当个键盘侠，谢谢！

文档流

文档中可显示的元素在排列时候的开始位置以及他们所占的区域。

因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容。

浮动 float

定义

使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。
值            left、right、none
特征
    1、块元素可以在一行显示
    2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
    3、行内元素支持宽高
    4、脱离文档流
    5、块元素默认宽度会改变(包裹性)
    6、父级高度塌陷(破坏性)
          子元素浮动后，父元素高度不会自动撑开。
    7、换行不会被解析成空格
     浮动后的元素就会脱离文档流了，那它就不属于文档流里的结构了，所以换行、空格都跟父级没关系了

特征4、脱离文档实例：

html部分

<div class="divdemo">divdemo1</div>
<div class="divdemo02">divdemo02</div>
<span>hello</span>

css部分

div{
    float:left;
    width:100px;
    height:100px;
    background:yellowgreen;
}
span{
    float:right;
    width:100px;
    height:100px;
    border:1px solid #333;
}

特征5、块级元素默认高度会改变

<!--html部分-->    
    <div>hello world</div>
/*css代码部分*/
    .div{
        height:50px;
        floalt:left;
        border:1px solid #333;
    }

特征6、父元素高度塌陷实例

<!--html代码-->
<div class= "parent">
    <div class= "children">do you relaize something?</div>
</div>
/*css代码*/
.parent{
    /*float:left;*/
    border:1px solid #333;
}
.children{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #f00;
    background: #ccc
}    

7、换行不会被解析成空格

<!--htm代码-->

<div class="parent">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>
/*css代码*/
.parent{
    border: 1px solid #f00;
}
.box{
    width: 100px;
    height: 200px;
    background: green;
    color: #fff;
    float: left;
}

脱离文档流

脱离文档流指的是元素不在页面中占位置，定位是完全脱离文档流

实例：
html代码

<div class="div1"></div>
<span>指的是元素不在页面中占位置了，但是文档却还占着位置。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。元素不在页面中占位置了，但指的是元素不在页面中占位置了，但是文档却还占着位置。。。是文档却还占着位置。。。的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。</span>

css代码

.div1{
    width: 100px;
    height: 50px;
    background: green;
    color: #fff;
    border: 5px solid blue;
    float: left;
    /*margin: 20px;
    padding: 20px;*/
}
span{
    width:100px;
    height:50px;
}
            

float与inline-block的区别

对于这一个区别，除了前面脱离文档流和父元素高度塌陷的差异，还有一个区别是：
如果一排元素高度不一至的情况下，想让他们按顺序排列就可以选择inline-block

实例：

<!--html代码-->
    <ul>
        <li>1</li>
        <li style="height: 200px;">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
/*css代码*/
    ul{
        width: 300px;
        font-size: 0;
    }
    li{
        list-style: none;
        width: 100px;
        height: 150px;
        background: green;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
        color: #fff;
        /*float: left;*/
        /*float: right;*/
        display: inline-block;
    }

清除浮动的若干方法：

清除浮动的方法

1、clear
2、给父级添加高度
    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）
3、inline-block
    具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令
5、空标签
    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准
    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差
6、br清除浮动
    与上面的问题是一样
7、after伪类清除浮动
    after    代表选择到的元素的内容的最后面
            after伪类的内容默认是一个行内元素
    content        设置的内容

代码示例：

<!--html代码-->
<div class="parent clearfix">
    <div class="box"></div>
    <!--<div style="clear: both;"></div>-->
    <br clear="all" />
</div>
/*css代码*/
.parent{
    border: 1px solid #f00;
    /*height: 100px;*/
    /*display: inline-block;
    margin: 0 auto;*/
    /*overflow: hidden;*/
}
.clearfix:after{
    content:' ';
    display:block;
    clear:both;
}
.box{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}