今天在看博客园的页面布局时发现有不少空白的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. arcgis python添加几何属性

    import arcpy import numpy import math def AddGeometryAttributes(fc, geomProperties, lUnit, aUnit, cs ...

  2. Extjs GridPanel 监听事件 行选中背景

    Extjs设置GridPanel选中行背景色和选中单元格背景色 var view = grid.getView(); view.getRow(index).style.backgroundColor  ...

  3. pytest文档25-conftest.py作用范围

    前言 一个测试工程下是可以有多个conftest.py的文件,一般在工程根目录放一个conftest.py起到全局作用. 在不同的测试子目录也可以放conftest.py,作用范围只在该层级以及以下目 ...

  4. java中ant包中的org.apache.tools.zip实现压缩和解压缩

    其实apache中的ant包(请自行GOOGLE之ant.jar)中有一个更好的类,已经支持中文了,我们就不重复制造轮子了,拿来用吧,这里最主要的功能是实现了 可以指定多个文件 到同一个压缩包的功能 ...

  5. [翻译] AsyncImageView 异步下载图片

    AsyncImageView  https://github.com/nicklockwood/AsyncImageView AsyncImageView is a simple extension ...

  6. struts2 iterator 迭代标签只显示前五条记录

    <s:iterator value="#session.produceLists" var="produce" begin="0" e ...

  7. java表格 JTable实例 (带滚动条,内嵌选择框)

    import javax.swing.JTable; import javax.swing.table.AbstractTableModel; import javax.swing.JScrollPa ...

  8. Linux下分割、合并PDF(pdftk),用于Linux系统的6款最佳PDF页面裁剪工具

    Linux下分割.合并PDF(pdftk),用于Linux系统的6款最佳PDF页面裁剪工具 Linux下分割.合并PDF(pdftk) pdftk http://www.pdflabs.com/doc ...

  9. Java多媒体编程应用

    1. 声音文件的播放 1.1 在Applet中播放声音 在Applet中,可以使用AudioClip来播放声音,它非常简单,只有三个方法:play().loop()和stop(). 例1.1 利用Au ...

  10. 第十五章 springboot + pojo默认值设置

    我们有时需要给POJO设置默认值 pojo设置(推荐) 1.User package com.xxx.firstboot.domain; import lombok.Getter; import lo ...