思洋互动网站建设学前班

◆如何让包围元素在视觉上包围浮动元素呢？

需要在这个元素中的某个地方应用clear：

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
广州网站建设,网站建设,广州网页设计,广州网站设计

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. .clear{  
15. clear:both;  
16. }  
17.  
18. <divclassdivclass="news"> 
19. <imgsrcimgsrc="news-pic.jpg"/> 
20. <p>sometext</p> 
21. <divclassdivclass="clear"></div> 
22. </div> 
23.  

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器div进行浮动：

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

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

事实上，W3School站点上的所有页面都采用了这种技术，如果您打开我们使用CSS文件，您会看到我们对页脚的div进行了清理，而页脚上面的三个div都向左浮动。
广州网站建设,网站建设,广州网页设计,广州网站设计