css中clear属性的认识

2020-12-13 16:03

阅读：311

标签：style blog http color width 2014

今天在看博客园的页面布局时发现有不少空白的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在下一行，结果确出乎意料的初夏如下结果：

soscw.com,搜素材

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 id="lonlatDiv">Lon and Lat is : span  id="text">span>div>

clear的值有：

clear:left; /*表示该元素左边不存在浮动元素 */
clear:right;  /*表示该元素右边不存在浮动元素  */
clear:both;  /*表示该元素两边都不存浮动元素  */
clear:none  /*表示两边允许有浮动元素  */

css中clear属性的认识,搜素材,soscw.com

css中clear属性的认识

标签：style blog http color width 2014

原文地址：http://www.cnblogs.com/yangzhilong/p/3797014.html

上一篇：delphi webbrowser 经常用法演示样例

下一篇：《Java数据结构》树形结构

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css中clear属性的认识
文章链接：http://soscw.com/essay/35688.html

亲，登录后才可以留言！

css中clear属性的认识

评论

热门文章

推荐文章

最新文章

置顶文章