请教一下这里有关浮动失效的问题

问题描述：

为什么这里设置了float：left img标签还是没有在它的下面

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/h1.css">
</head>
<body>
    <div class="header">
        <div class="about">ABOUT</div>
        <div class="underline"></div>
        <div class="introduction">
          Lorem Ipsum is simply dummy text of the printing and typesetting</br>
          industry. Lorem Ipsum has been the industry's standard dummy</br> text ever 
          since the 1500s
        </div>
    </div>
    <div class="bd">
        <div class="left">
            <h2> A WORD </h2>
            <h2>ABOUT US </h2>
            <div class="lb">
                Praesent dignissim viveraa est, sed</br>
                bibendum ligula congue non. Sed</br> ac nist et feils
                gradvida comnodo?</br> Suspendisse eget ullamcorper</br> ipsum.
                Suspendisse diam amet.
                </br></br>
                <button type="button">EXPLORE</button>
            </div>
        </div>

        <img src="images/bb3.jpg">
        <div class="right1">
            70000
            <div class="underline"></div>
            Students
        </div>
        <!-- <div class="right2">
            600
            <div class="underline"></div>
            Faculty
        </div> -->
    </div>
</body>
</html>

相关代码：

* {
    margin: 0;
    padding: 0;
}
.header .about {
    margin-top: 30px;
    font-size: 32px;
    text-align: center;
}
.underline {
    width : 60px;
    height: 3px;
    background: #07cbc9;
    margin: 10px auto;
}
.header .introduction {
    text-align: center;
    color: gray;
    font-size: 14px;
}
.bd {
    width: 1200px;
    height: 434px;
    margin: 30px auto;
    border: 1px solid black;
}
.bd .left {
    float: left;
    margin-top: 20px;
}
.bd .left .lb {
    margin-top: 20px;
    padding: 20px;
    width: 300px;
    font-size: 18px;
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, 0.5);
}
.bd .left .lb button {
    width: 140px;
    height: 40px;
}
.bd img {
    display: block;
    width: 650px;
    height: 100%;
    /* margin: 0 auto; */
}
.bd .right1 {
    float: right;
    width: 260px;
    padding: 40px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #07cbc9;
}

相关截图：

weixin_慕丝0226078 2021-02-02

源自：浮动与定位 4-8 自由编程

收起

2回答

好帮手慕言回答被采纳获得+3积分 2021-02-04 11:00:18

同学你好，解答如下：

1、关于同学提到的“我查了说块级元素是不受float影响了，不会将这一部分让开”，理解的是不对的，可以参考下方的例子：

页面效果：

p标签是块级元素，div设置浮动之后，覆盖在了p标签上。

2、img标签本身是比较特殊的，虽然把img标签设置为块元素了，但是不能让左侧的元素覆盖在图片上，关于这个现象，同学可以记住呦。

祝学习愉快~

收起回答

好帮手慕言 2021-02-03 10:16:20

同学你好，同学描述的是下方红框处的效果吗？

如果是的话，那么是因为img标签比较特殊，即使图片左侧的元素设置了浮动，img也不会被覆盖在左侧内容的下面。如果想实现此效果，可以使用定位，例如：

调整img的位置：

如果不是上述问题，同学可以详细描述一下自己想实现的效果，老师帮助解答，祝学习愉快~

收起回答

提问者 weixin_慕丝0226078 #1

老师，再请教您一下，我是想要这样的效果，我看网上相关资料说，对于行内元素，会产生类似的效果，会把这一部分让开，但是这里我把它设成display:block了，我查了说块级元素是不受float影响了，不会将这一部分让开，这个display属性对于img也不是完全将它变成块？还保留自己的性质？麻烦老师了

2021-02-03 21:33:20