css浮动元素中的文字

发布于 2022-09-01 12:25:45 字数 2454 浏览 15 评论 0

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

<!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>

如下图所示：
图片描述

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狼亦尘 2022-09-08 12:25:46

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

回复收藏 0

楠木可依 2022-09-08 12:25:45

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>

图片描述