今天在看博客园的页面布局时发现有不少空白的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属性的认识的更多相关文章

  1. CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...

  2. 详解CSS中clear属性both、left、right值的含义

    前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear: ...

  3. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  4. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  5. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

  6. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  7. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  8. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  9. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

随机推荐

  1. list C++实现

    模仿STL中list,实现了其大部分功能.list可以高效地利用内存资源,常数时间的插入删除操作.并且,list除了erase外,不怎么存在迭代器失效的现象. #include<iostream ...

  2. C# string byte[] Base64 常用互相转换

    参考: http://www.cnblogs.com/zxx193/p/3605238.html?utm_source=tuicool http://www.cnblogs.com/freeliver ...

  3. nyoj 164&amp;&amp;poj2084 Game of Connections 【卡特兰】

    题意:将1~2n个数依照顺时针排列好.用一条线将两个数字连接起来要求:线之间不能有交点.同一个点仅仅同意被连一次. 最后问给出一个n,有多少种方式满足条件. 分析: ans[n]表示n的中的种类数. ...

  4. MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple

    从控制器传递多个Model到视图,可以通过ViewData, ViewBag, PartialView, TempData, ViewModel,Tuple等,本篇逐一体验.本篇源码在github. ...

  5. 安装arcgis10.5不能启动服务的解决方案转

    柚子的二分口粮地 来自:http://www.cnblogs.com/youzi-xuchongyou/p/7218422.html 安装arcgis10.5不能启动服务的解决方案 最近由于公司需要, ...

  6. linux 监控CPU 内存情况

    htop

  7. [Android UI] Activity Maintheme (Android 解决程序启动时的黑屏问题)

    <style name="MainTheme" parent="@android:style/Theme"> <item name=" ...

  8. iOS:UIView视图与组件控件

    一.UIView常见属性  (1)@property(nonatomic,readonly)UIView *superview; //获取自己的父控件对象  (2)@property(nonatomi ...

  9. 附4 springboot源码解析-run()

    public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); / ...

  10. BigDecimal 小数 浮点数 精度 财务计算

    简介 float和double类型的使用局限: 单精度浮点型变量float可以处理6~7位有效数,双精度浮点型变量double可以处理15~16位有效数,在实际应用中,如果需要对更大或者更小的数进行运 ...