css浮动元素中的文字

初学前端，对于浮动有了大概的了解，但是试验的时候发现了一个问题，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>float</title>
    <style type="text/css">
        #a
        {
            background-color:red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:yellow;    
            height:50px;
            width:100px;
        }
        #c
        {
            background-color:blue;   
            height:50px;
            width:100px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
            float: left;
         }
         #clear{
            clear: left;
         }

    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-cc</div>
</body>
</html>

假如对'#b'选择器应用了float:left属性，那么应用该选择器的div块会脱离文档流，并且覆盖掉应用了'#c'选择器的div块，但是为什么‘#c’div块里的文字不会被覆盖，而且还在原来得位置？
‘#b’选择器应用浮动元素后的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>float</title>
    <style type="text/css">
        #a
        {
            background-color:red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:yellow;    
            height:50px;
            width:100px;
            float: left;
        }
        #c
        {
            background-color:blue;   
            height:50px;
            width:100px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
            float: left;
         }
         #clear{
            clear: left;
         }

    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-cc</div>
</body>
</html>

如下图所示：

你的#b没有浮动呢，还有，运行你上面的代码，显示效果肯定不是你截图的样子啦，是不是你少复制代码进来啦～

这是你现在的运行效果：http://codepen.io/YuanWing/pen/YXxQoL

你的HTML中没有使用id='d'的标签。

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

文本和行内元素会环绕在float元素周边的。
div#c的文本被浮动元素最下面显示，但是div本身还是在最上面的。

<style>
    .block {
        width: 200px;
        height: 200px;
    }
    .float { float: left; }
    .blue { background: #44accf; }
    .green { background: #b7d84b; }
    .orange { background: #E2A741; }
</style>
<body>
    <div class="block blue float">B</div>
    <span class="green">C</span>
    <div class="block orange">D</div>
</body>

【B半透明效果】

看一下这个例子，B是浮动元素，C是行内元素，D是块元素且不浮动走；
结果可以看到

C在浮动元素右边，因为它是行内元素，会在同一行显示
D中的文本在浮动元素下方，而div本身是在C元素的下一行（块元素作用）

Further Reading：http://alistapart.com/article/css-floats-101

【热门文章】