详细地看看浮动和清理

2019-09-08 郑州网站建设  

假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景色彩和边框的元素中。您可能编写下面的代码:

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src=http://www.divcss5.com/css3-style/"news-pic.jpg" /> <p>some text</p> </div>

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

怎么让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

clear 属性实例 - 对空元素应用清理

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

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } <div class="news"> <img src=http://www.divcss5.com/css3-style/"news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1386.html转载请标明出处,谢谢合作!
标签:
  • 看看
  • 希望
  • 假设
  • 浮动
  • 清理
  • 详细