Question

我正在做这个简单的网页，我在尝试设置浮动时遇到问题：左边是一堆div。我创建了类aluno并应用了float：left，问题是来自其他类的其他div也被浮动到左边。我该怎么做才能防止这种情况发生？

我的HTML代码：

<div class ="main">
    <div class = "aluno">
        <p>
            Cena
            <button type="button" onclick="show('img')">+</button>
        </p>
        <p><img id="img1" src="img/img1.png" ></p>
    </div>

    <div class = "aluno">
        <p>
            Cena
            <button type="button" onclick="show('img')">+</button>
        </p>
        <p><img id="img" src="img/img.png"></p>
    </div>

<div class = "teste">
</div>

我的css代码：

.aluno{
    float:left;
    padding-left: 70px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
 }

Answer 1

您可以在其他课程中使用float:none。

Answer 2

将clear:both添加到.teste。

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。

  .teste{
       clear: both;
    }

JS小提琴： http://jsfiddle.net/LhtrC/

如何控制div上的float属性

2 个答案: