思洋互动网站建设学前班

CSS float属性

在CSS中，我们通过float属性实现元素的浮动。

如需更多有关float属性的知识，请访问参考手册：CSS float属性。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：
广州网站建设,网站建设,广州网页设计,广州网站设计

要想阻止行框围绕浮动框，需要对该框应用clear属性。clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. .news{  
2. background-color:gray;  
3. border:solid1pxblack;  
4. }  
5.  
6. .newsimg{  
7. float:left;  
8. }  
9.  
10. .newsp{  
11. float:right;  
12. }  
13.  
14. <divclassdivclass="news"> 
15. <imgsrcimgsrc="news-pic.jpg"/> 
16. <p>sometext</p> 
17. </div> 
18.  

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。