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>

如下图所示：
图片描述

css float

阅读 8.2k

3 个回答

得票最新

ch_gilbert

发布于
2015-06-16

✓ 已被采纳

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>

图片描述