首页 > 代码库 > css中clear属性的认识
css中clear属性的认识
今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both。
然后去W3C文档里和百度补脑了一下，总结如下：
这是之前我写的一段测试代码：
<div style="height: auto;"> <div id="map"></div> <div style="float: left;width: 50%"> <div id="searchResult"> </div> </div> </div> <div id="lonlatDiv">Lon and Lat is : <span id="text"></span></div>
其中map的DIV是float为left的，我期待的效果是map的div和searchResult的div在一行，而lonlatDiv在下一行，结果确出乎意料的初夏如下结果：
lonlatDiv居然跟上面的DIV到一行去了，这肯定不是我想要的结果，
解决方案（2选1）是：
<div style="height: auto;"> <div id="map"></div> <div style="float: left;width: 50%"> <div id="searchResult"> </div> </div> <div style="clear: both;"></div> <!-- 这里加个空白的div --> </div> <!-- lonlatDiv的style里加上clear: both; --> <div id="lonlatDiv">Lon and Lat is : <span id="text"></span></div>
clear的值有：
clear:left; /*表示该元素左边不存在浮动元素 */clear:right; /*表示该元素右边不存在浮动元素 */clear:both; /*表示该元素两边都不存浮动元素 */clear:none /*表示两边允许有浮动元素 */
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。