clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .news { background-color: gray; border: solid 1px black; float:left; width:600px; margin:0px auto; } .news img { float: left; width:50px; height:50px; } .news p { float: right; } .clear { clear: both; } /* 因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:我们可以添加一个空元素并且清理它。这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。*/ </style> </head> <body> <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 不过还有另一种办法,那就是对容器 div 进行浮动: .news {
background-color: gray;
border: solid 1px black;
这样会得到我们希望的效果。但下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。 </body> </html> |
|