浮动图像CSS

Question

我是CSS和Bootstrap的新手。每当我试图将图片粘贴到左边，以便在右边写文本时，我都会使用这个Bootstrap类rounded float-left问题是图片覆盖了我网页中的其他内容，比如页脚。我知道是因为它在漂浮。我该怎么解决这个问题？非常感谢。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
</div>

Answer 1

像这样尝试

Try like this please
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 clearfix">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>

Answer 2

您应该使用；clearfix"；类(在使用float的条件下(。你可以通过插入一个"；clearfix"；在适当的情况下。我在下面附上一张图片。我真诚地希望这能有所帮助。上传图像

Answer 3

最简单的解决方案是使用clearfix实用程序类，最好将其添加到包含浮动的div中(在上面的代码中，它将是div和类span-2(。这个实用程序类确保正确地清除浮动，并避免出现类似您遇到的问题。

Answer 4

使用flexbox或bootstrap网格，甚至<table></table>

flexbox教程：https://www.tutorialspoint.com/flexbox/index.htm