clear的理解

原创 2015年07月07日 11:51:36

之前对于clear,很少用。

以前对divfloat之后,影响了其他元素,所以我设计的所有web页面,第一定义就是float。这样所有页面的元素都是脱离文档流来定位的,虽然天下乌鸦一般黑,——但是总是感觉比较另类,不那么高级。


于是今天看到一个clear:这个只是会影响自己dom元素,不会影响其他元素。

增加clear之后,页面在渲染本dom的时候,按照文档流,进行位置判断,如果发现将要依附的元素有float属性,则避而远之,继续在判断下一个,一直找到最后一float,然后换一行,安顿下来。(clear:与 float  不共戴天,但clear弱势,不能左右别人,只能避而远之,但是又不会离太远,就是紧接着下一行

比如 :按照加载顺序,浏览器这样判断

div1 :脱离文档流按照左浮动

div2:发现div1并没有占用位置,就默认顶到了第一个——其实就藏到了div1的背后

div3:按照文档流,先判断2的位置,然后基于标准的文档流,然后在相对于2的位置,换一行进行float

div4:会找上一个元素,发现是div3,是一个带float,赶快躲开 于是紧接着div3安顿下来了。

<style type="text/css">
    #test div{
        border:1px solid #000;
        /*position: relative;*/
/*        top:5px;
        left:5px;*/
        /*float:left;*/
    }
</style>
<div style="width:1200px; border:1px solid #f60" id="test">
    <div style="width:200px;height:100px;border:1px solid blue;float:left">1</div>
    <div style="width:200px;height:150px;border:1px solid red;">2</div>
    <div style="width:200px;height:150px;border:1px solid green;float:left">3</div>
    <div style="width:300px;clear:left">clear</div>
</div>

类似于这种




还有一个例子

<style type="text/css">
    #test div{
        border:1px solid #000;
        /*position: relative;*/
/*        top:5px;
        left:5px;*/
        /*float:left;*/
    }
</style>
<div style="width:1200px; border:1px solid #f60" id="test">
    <div style="width:200px;height:200px;border:1px solid blue;float:left">1</div>
    <div style="width:200px;height:150px;border:1px solid red;;float:left">2</div>
    <div style="width:300px;clear:left">clear</div>
    <div style="width:200px;height:150px;border:1px solid green;">3</div>
</div>
效果:


参考这里:http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/

相关文章推荐

理解float clear(转载滴)

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。       前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。      写在前面的话:...

clear:both的理解

clear:both的理解 在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性...

正确理解 clear:both

要注意以下几点:  1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。  2、 浮动元素后边的非浮动元素显示问题。  ...

你真的理解clear:both吗?

找了好久了原文地址:你真的理解clear:both吗?作者:莫文   在开发中,从美工MM给你Html代码中,肯定能经常看”div style="clear:both;">div>”这样的代码,但...

CSS中 clear.both 的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的...
  • skxlfmn
  • skxlfmn
  • 2011年02月14日 15:35
  • 272

CSS 浮动 float 清除浮动 clear 最容易理解的文章

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边...

Hibernate深入理解----03操作Session缓存方法(flush、refresh、clear,事务隔离级别)

参考代码下载github:https://github.com/changwensir/java-ee/tree/master/hibernate4     Session 接口是 Hibernat...

通俗理解float和clear

转自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,...
  • myl1992
  • myl1992
  • 2015年05月28日 10:38
  • 214

Buffer中clear(),flip()和rewind()的理解

理解缓冲区的概念,就是Buffer的意义:缓冲区是特定基本类型元素的线性有限序列。除内容外,缓冲区的基本属性还包括容量、限制和位置:缓冲区的容量 是它所包含的元素的数量。缓冲区的容量不能为负并且不能更...
  • Dod_Jdi
  • Dod_Jdi
  • 2016年05月04日 17:17
  • 769

clear:both的理解

clear:both的理解 在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用...
  • broze
  • broze
  • 2012年08月16日 16:48
  • 294
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clear的理解
举报原因:
原因补充:

(最多只允许输入30个字)