css因为浮动所隐藏文字

CSS是前端开发中非常重要的一部分，它可以让我们对网页的样式进行控制，使得网页更加美观。其中，浮动是CSS中一个十分重要的属性，可以让元素进行排列，达到一定的效果。然而，有时候会由于浮动而导致文字被隐藏，让人感到十分困惑。

那么，首先我们需要了解，为什么会出现这种情况呢？事实上，当我们将元素设置为float时，它就会成为块级元素，并且会脱离文档流，不再占据原来的位置。而其他元素则会占据这个元素原来的空间，从而覆盖了一部分内容。

div{
    float: left;
}

上述代码中，我们将div设置为浮动元素，那么就有可能会出现文字被覆盖的情况。

那么，如何避免这种情况的发生呢？最简单的方法就是使用clear属性。clear可以让元素回到文档流中，并且避免被其他元素覆盖。通常情况下，我们会在浮动元素后面添加一个空div，并为这个div设置clear:both属性。

div{
    float: left;
}
.clearfix{
    clear:both;
}

上述代码中，我们先为浮动元素设置了float:left属性，然后在div后面添加了一个空的clearfix类元素，并为它设置了clear:both属性。这样就可以保证浮动元素后面的内容不被覆盖了。

总之，当出现浮动导致文字被隐藏的情况时，我们可以通过添加一个空div并设置clear属性的方式解决这个问题。这个方法十分简单，但却非常实用，可以让我们更好地掌控网页的布局。