css中clear属性的认识

今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both。

然后去W3C文档里和百度补脑了一下，总结如下：

这是之前我写的一段测试代码：

<div style="height: auto;">

        <div id="map"></div>

        <div style="float: left;width: 50%">

            <div id="searchResult">&nbsp;</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">&nbsp;</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  /*表示两边允许有浮动元素  */

巴特西

css中clear属性的认识

最新文章

热门文章