float浮动脱离文本档深入理解

float：注意1:宽度要重新定义，不会自动100%，否则为0；2:无论什么类型的浮动之后都会变成块级元素 3:遇到同样浮动物体的边框或者父边框盒子浮动才会停止　　

float脱离文本，并不能浮在已经形成正常文档流的上面。而是正在流式布局遇到float不考虑他。float脱离文档流的含义是“正常的盒子布局可以无视它，但是它不能无视已经布好了的盒子的上面”例如

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #a{
        height: 200px;
        background-color: red;
    }
    #b{
        float:left;
        width: 200px;
        background-color: blue;
        height: 100px;
    }
    </style>
</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    
</body>
</html>

结果如下。因为div id＝“b”虽然脱离文档流，但是div id＝“a”已经形成，所以不能忽视它。

若

 <div id="a"></div>
    <div id="b"></div>调换

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #a{
        height: 200px;
        background-color: red;
    }
    #b{
        float:left;
        width: 200px;
        background-color: blue;
        height: 100px;
    }
    </style>
</head>
<body>

    
    <div id="b"></div>
    <div id="a"></div>
</body>
</html>

则结果如下，因为<div id="b">先浮动，正常流<div id="a">则会忽视浮动盒子的存在

posted on 2016-03-31 17:11 王叙鹏阅读(301) 评论(0) 编辑收藏举报